如何在點擊按鈕時顯示實時聊天對話框？

我想在我的網站上顯示一個即時聊天表單，點擊一個按鈕即可打開。我需要顯示的聊天表單在一個單獨的文件中。我如何使用jQuery來做到這一點？它也需要有響應。如何在點擊按鈕時顯示實時聊天對話框？

事情是這樣的：https://www.websitealive.com/

2015-04-22 Zee

嘗試提供一些代碼與您的問題。一個小提琴將不勝感激 –

嘗試這種解決方案寫一個js單擊事件，這只是一個佈局。只需在chatBox中添加一個聊天表單。只需複製 - 粘貼完整的代碼。

<!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>

來源

2015-04-22 07:35:02

非常好，但當聊天「增長」時不滾動 –

@LincesMarques：我編輯了我的代碼。你可以參考:) –

您可以加載形式進入的iframe如下

「https://www.websitealive3.com/9/operator/guest/gDefault_v2.asp?cframe=chat&groupid=9&websiteid=77&departmentid=23&operatorid=21139&sessionid_=347739&iniframe=dock」

<iframe id="iframe_window" style="visibility:visible;width: 400px; height: 525px; border: 1px solid rgb(214, 214, 214); right: 20px; bottom: -1px; display: none" onload="this.style.visibility = 'visible';" src="Your file url"></iframe>

添加它加載iframe的元素。我會承擔a標籤如下

<a class="load_chat" href="#">Chat with us</a>

及以上a

$('.load_chat').on('click',function(){ 
     $("#iframe_window").css('display','inline'); 
});

來源

2015-04-22 07:25:07

如何在點擊按鈕時顯示實時聊天對話框？

回答

相關問題