功能需求
页面右下角默认存在一个悬浮按钮，点击按钮可在其上方弹出一个窗口区域，弹窗自身带有关闭按钮，也可以通过再次点击下方的按钮关闭右下角弹窗。
实现方法
1. css部分：
.container {
position: relative;
height: 100vh;
padding: 20px;
}
.content {
background-color: #f1f1f1;
height: 100%;
padding: 20px;
}
.floating-button {
position: fixed;
bottom: 30px;
right: 30px;
background-color: #337ab7;
color: #fff;
padding: 10px 20px;
border-radius: 50px;
cursor: pointer;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
z-index: 99;
}
.popup {
position: fixed;
bottom: 80px;
right: 30px;
width: 300px;
background-color: #fff;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
display: none;
}
.popup-content {
padding: 20px;
}
.popup p {
margin-bottom: 10px;
}
.popup button {
background-color: #337ab7;
color: #fff;
padding: 8px 16px;
border: none;
cursor: pointer;
float: right;
}
2. html部分：
页面内容
3. js部分：
function togglePopup() {
var popup = document.getElementById("popup");
if (popup.style.display === "none") {
popup.style.display = "block";
} else {
popup.style.display = "none";
}
}
function closePopup() {
var popup = document.getElementById("popup");
popup.style.display = "none";
}
代码说明：
上述代码会创建一个容器（
.container
），其中包含页面内容（
.content
）、浮动按钮（
.floating-button
）和弹出窗口（
.popup
）。通过点击浮动按钮，可以切换弹出窗口的显示状态（动态修改其
display
属性为
none
或
block
）。弹出窗口中包含自定义的内容和关闭按钮。
这是一个基本的弹窗功能，有需要的同学还可以进一步美化其样式，或者增加其功能（如：默认动态加载栏目、内容页相关参考信息；ajax查询等）
完整实例：
页面右下角弹出窗口示例
页面内容
感兴趣的同学还可以使用本站在线工具测试上述代码的运行效果：
http://tools.jb51.net/code/HtmlJsRun
您可能感兴趣的文章:
JS如何实现在弹出窗口中加载页面
禁止iframe页面的所有js脚本如alert及弹出窗口等
js实现弹出窗口、页面变成灰色并不可操作的例子分享
JavaScript页面刷新与弹出窗口问题的解决方法
js右下角弹出窗口,点击可关闭效果
js实现右下角窗口弹出窗口效果
JS封装的模仿qq右下角消息弹窗功能示例
纯js的右下角弹窗实例
JS实现简单的右下角弹出提示窗口完整实例
JS非Alert实现网页右下角“未读信息”效果弹窗
js实现仿MSN带关闭功能的右下角弹窗代码
javascript实现的右下角弹窗实例
js 右下角弹窗效果代码(IE only)