如何在点击按钮时显示实时聊天对话框？ [英] How to show live chat dialog box on click of button?
本文介绍了如何在点击按钮时显示实时聊天对话框？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我想在我的网站上显示一个实时聊天表单，只需点击一下按钮即可打开。我需要显示的聊天表单位于单独的文件中。我怎么能用jquery做到这一点？它还需要响应。
I want to show a live chat form in my website which will open on click of a button. The chat form that I need to show is in a separate file. How can I do that using jquery? It also needs to be responsive.
这样的事情： https： //www.websitealive.com/
推荐答案
试试这个解决方案，这只是一个布局。只需在聊天框中添加聊天表单即可。只需复制 - 粘贴完整的代码。
Try this solution, This is just a layout. Just add a chat form inside the chatBox. Just Copy-Paste the complete code.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Simple Chatbox</title>
<style type="text/css">
.chat-box {
position:fixed;
right:15px;
bottom:0;
box-shadow:0 0 0.1em #000;
}
.chat-closed {
width: 250px;
height: 35px;
background: #8bc34a;
line-height: 35px;
font-size: 18px;
text-align: center;
border:1px solid #777;
color: #000;
}
.chat-header {
width: 250px;
height: 35px;
background: #8bc34a;
line-height: 33px;
text-indent: 20px;
border:1px solid #777;
border-bottom:none;
}
.chat-content{
width:250px;
height:300px;
background:#ffffff;
border:1px solid #777;
overflow-y:auto;
word-wrap: break-word;
}
.box{
width:10px;
height:10px;
background:green;
float:left;
position:relative;
top: 11px;
left: 10px;
border:1px solid #ededed;
}
.hide {
display:none;
}
</style>
</head>
<body>
<div class="chat-box">
<div class="chat-closed"> Chat Now </div>
<div class="chat-header hide"><div class="box"></div>Online Support</div>
<div class="chat-content hide">
*<br>
*<br>
*<br>
*<br>
*<br>
*<br>
*<br>
Your chat content...
*<br>
*<br>
*<br>
*<br>
*<br>
*<br>
*<br>
*<br>
*<br>
*<br>
*<br>
*<br>
*<br>
*<br>
Your chat content...
*<br>
*<br>
*<br>
*<br>
*<br>
*<br>
*<br>
</div>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".chat-closed").on("click",function(e){
$(".chat-header,.chat-content").removeClass("hide");
$(this).addClass("hide");
});
$(".chat-header").on("click",function(e){
$(".chat-header,.chat-content").addClass("hide");
$(".chat-closed").removeClass("hide");
});
});
</script>
</body>
</html>
这篇关于如何在点击按钮时显示实时聊天对话框？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
