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.
<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>.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;
}$(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');
}
});
});
