Criar botão de Abrir e Fechar chat

  • Autor Autor Nika Nodia
  • Data de início Data de início
Tradução em andamento: em alguns minutos este tópico estará em português. Por enquanto, o conteúdo está no original em espanhol. Ver original
N

Nika Nodia

Dseda
Programador
No recomendado
Usuário com poucas negociações! Use sempre o saldo do ForoBeta!
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:
Screenshot_3.webpScreenshot_4.webp
 
Foi útil? Participe da conversa

Com sua conta grátis você pode responder, mandar mensagem privada ao autor e comprar com Saldo retido: o pagamento é liberado quando você recebe o combinado.

Leva 30 segundos · você volta a este tópico ao terminar
También me uno a la pregunta 😀
 
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:
 
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 - - -

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 🙂
Screenshot_5.webpScreenshot_6.webp
 
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 o anexo 100201Ver o anexo 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:
2mdht3c.jpg

Un gusto haber sido de ayuda, saludos.
 
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:
2mdht3c.jpg

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:
 
Puedes solucionarlo de esta manera:



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

quedaría así
ru08cg.jpg

Saludos
 
[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');
		}
	});
});
 
Voltar
Topo