Crear botón de Abrir y Cerrar chat

Nika Nodia · 17 May 2017

Hola betas, quería saber si alguien me podría pasar o ayudar con el código para crear algo como esto. Al clicar que abra el chat y cierre, usaré chatango igual, pero necesito ayuda con el box. :/ :distant:

Luis Urdaneta · 17 May 2017

También me uno a la pregunta

VeneLicencia · 17 May 2017

espero que consigas ayuda!por otra parte me gustaría decirte que un chat en una pagina hoy en día no es del todo importante tienes que tener buen trafico pero no se que piense tu! :encouragement:

gerardoMx · 17 May 2017

Pure CSS Modal Box

Nika Nodia · 17 May 2017

gerardoMx dijo:
Pure CSS Modal Box

Me da problemas, no abre y no cierra

gerardoMx · 17 May 2017

Nika Nodia dijo:
Me da problemas, no abre y no cierra

A mi me va bien , por eso lo puse, puede ser que el problema este en tu navegador

Nika Nodia · 17 May 2017

gerardoMx dijo:
A mi me va bien , por eso lo puse, puede ser que el problema este en tu navegador

El problema es que me falta el js, no aparece para pegarlo en el archivo.

- - - Actualizado - - -

gerardoMx dijo:
A mi me va bien , por eso lo puse, puede ser que el problema este en tu navegador

Ya está, muchas gracias [MENTION=20768]gerardoMx[/MENTION] me ayudastes mucho, edité el css y lo podrás ver aqui o en la web de mi firma

gerardoMx · 17 May 2017

Nika Nodia dijo:
El problema es que me falta el js, no aparece para pegarlo en el archivo.

- - - Actualizado - - -

Ya está, muchas gracias [MENTION=20768]gerardoMx[/MENTION] me ayudastes mucho, edité el css y lo podrás ver aqui o en la web de mi firma
Ver el archivo adjunto 100201 Ver el archivo adjunto 100202

Yo pensé que solo era css/html, que js pusiste Jquery?
si quieres que no se vea ese fondo blanco elimina estas lineas:
.modal-content {
/* background-color: #fefefe; */ eliminar linea
margin: 15% auto;
margin-bottom: 0px;
padding: 20px;
right: 0;
position: fixed;
/* border: 1px solid #888; */ eliminar linea
bottom: 0;
}

te quedaría asi:

Un gusto haber sido de ayuda, saludos.

Nika Nodia · 17 May 2017

gerardoMx dijo:
Yo pensé que solo era css/html, que js pusiste Jquery?
si quieres que no se vea ese fondo blanco elimina estas lineas:
.modal-content {
/* background-color: #fefefe; */ eliminar linea
margin: 15% auto;
margin-bottom: 0px;
padding: 20px;
right: 0;
position: fixed;
/* border: 1px solid #888; */ eliminar linea
bottom: 0;
}

te quedaría asi:

Un gusto haber sido de ayuda, saludos.

Muchas gracias por haberme respondido gerardo, lo del blanco se la puse yo por que sino no aparecería la X de cerrar. :encouragement:

gerardoMx · 17 May 2017

Puedes solucionarlo de esta manera:

.close {
color: #f00; cambiar valor
float: right;
font-size: 28px;
font-weight: bold;

quedaría así

Saludos

YeltsinReyes · 18 May 2017

[MENTION=169374]Nika Nodia[/MENTION] te eh creado este, dime si te funciona! :encouragement:

Html

HTML:

<div class="box-chat">
	<div class="box-chat-titulo">
		<div class="box-chat-circulo"></div>
		<h3>Abrir Chat</h3>
	</div>
	<div class="box-chat-body">
             el chat aqui...
	</div>
</div>

Css

HTML:

.box-chat {
	min-width: 150px;
	border: 1px solid #eee;
	border-radius: 3px 3px 0px 0px;
	background: #ffffff;
        position: fixed;
        bottom: 0px;
        right: 5px;
}
.box-chat .box-chat-titulo {
	padding: 5px 10px;
	background: #f1f2f3;
	border-radius: 3px 3px 0px 0px;
	cursor: pointer;
	display: block;
}
.box-chat .box-chat-titulo h3 {
	font-size: 14px;
	margin: 0px;
	display: inline-block;
}
.box-chat .box-chat-circulo {
      width: 10px;
      height: 10px;
      -moz-border-radius: 50%;
      -webkit-border-radius: 50%;
      border-radius: 50%;
      background: #3c763d;
      display: inline-block;
}
.box-chat .box-chat-body {
      overflow: hidden;
      padding: 10px 10px 0px 10px;
      display: none;
}

Js

HTML:

$(document).ready(function(){
	$(document).on('click', '.box-chat-titulo', function(){
		if($('.box-chat-body').css('display') === 'none'){
			$('.box-chat-body').show();
			$('.box-chat-titulo h3').text('Cerrar Chat');
		} else {
			$('.box-chat-body').hide();
			$('.box-chat-titulo h3').text('Abrir Chat');
		}
	});
});