資料結構
網路
關係資料庫管理系統 (RDBMS)
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C語言程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
服裝設計
法學如何使用CSS和JavaScript建立一個彈出式聊天視窗？
在網站的右下角，您一定見過彈出式聊天視窗。這在網站託管網站上很常見。它允許使用者在購買產品前直接詢問銷售問題。這樣的彈出式聊天視窗可以使用CSS輕鬆地在網頁上建立。讓我們來看看如何操作。
建立聊天按鈕
首先，使用<button>元素建立一個按鈕：
<button class="openChatBtn" onclick="openForm()">Chat</button>
定位聊天按鈕
要定位聊天按鈕，請使用position屬性並將其值設定為fixed。right和bottom屬性用於定位按鈕到右下角：
.openChatBtn {
background-color: rgb(123, 28, 179);
color: white;
padding: 16px 20px;
border: none;
font-weight: 500;
font-size: 18px;
cursor: pointer;
opacity: 0.8;
position: fixed;
bottom: 23px;
right: 28px;
width: 280px;
}
開啟聊天視窗的函式
單擊按鈕時會呼叫一個自定義函式來開啟聊天視窗。在此，將display屬性設定為block：
function openForm() {
document.querySelector(".openChat").style.display = "block";
}
聊天視窗的表單
每當在網頁上點選聊天彈出視窗時，它都會包含一個表單。該表單使用<form>元素建立。在此表單中設定傳送和關閉按鈕，以便隨時傳送資訊或關閉表單。
<form> <h1>Chat</h1> <label for="msg"><b>Message</b></label> <textarea placeholder="Type message.." name="msg" required></textarea> <button type="submit" class="btn">Send</button> <button type="button" class="btn close" onclick="closeForm()">Close</butto> </form>
關閉聊天視窗的函式
單擊按鈕時會呼叫一個自定義函式來關閉聊天視窗。在此，將display屬性設定為none：
function closeForm() {
document.querySelector(".openChat").style.display = "none";
}
設定聊天視窗的樣式
將聊天視窗的position屬性設定為fixed。將display屬性設定為none，因為我們不希望聊天視窗始終可見。只有單擊聊天按鈕時才能看到視窗：
.openChat {
display: none;
position: fixed;
bottom: 0;
right: 15px;
border: 3px solid #ff08086b;
z-index: 9;
}
示例
要使用CSS和JavaScript建立彈出式聊天視窗，程式碼如下：
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
* {
box-sizing: border-box;
}
.openChatBtn {
background-color: rgb(123, 28, 179);
color: white;
padding: 16px 20px;
border: none;
font-weight: 500;
font-size: 18px;
cursor: pointer;
opacity: 0.8;
position: fixed;
bottom: 23px;
right: 28px;
width: 280px;
}
.openChat {
display: none;
position: fixed;
bottom: 0;
right: 15px;
border: 3px solid #ff08086b;
z-index: 9;
}
form {
max-width: 300px;
padding: 10px;
background-color: white;
}
form textarea {
width: 100%;
font-size: 18px;
padding: 15px;
margin: 5px 0 22px 0;
border: none;
font-weight: 500;
background: #d5e7ff;
color: rgb(0, 0, 0);
resize: none;
min-height: 200px;
}
form textarea:focus {
background-color: rgb(219, 255, 252);
outline: none;
}
form .btn {
background-color: rgb(34, 197, 107);
color: white;
padding: 16px 20px;
font-weight: bold;
border: none;
cursor: pointer;
width: 100%;
margin-bottom: 10px;
opacity: 0.8;
}
form .close {
background-color: red;
}
form .btn:hover, .openChatBtn:hover {
opacity: 1;
}
</style>
</head>
<body>
<h1>Popup Chat Window Example</h1>
<h2>Click the below button to start chatting</h2>
<button class="openChatBtn" onclick="openForm()">Chat</button>
<div class="openChat">
<form>
<h1>Chat</h1>
<label for="msg"><b>Message</b></label>
<textarea placeholder="Type message.." name="msg" required></textarea>
<button type="submit" class="btn">Send</button>
<button type="button" class="btn close" onclick="closeForm()">Close</butto>
</form>
</div>
<script>
document .querySelector(".openChatBtn") .addEventListener("click", openForm);
document.querySelector(".close").addEventListener("click", closeForm);
function openForm() {
document.querySelector(".openChat").style.display = "block";
}
function closeForm() {
document.querySelector(".openChat").style.display = "none";
}
</script>
</body>
</html>
更新於：2023年12月8日
4K+ 次瀏覽
廣告