数据结构
网络
关系数据库管理系统 (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+ 次浏览
广告