javascript实现简约的页面右下角点击弹出窗口示例【测试可用】 原创
投稿:shichen2014
这篇文章主要介绍了javascript实现的页面右下角点击弹出窗口功能,结合实例形式详细分析了javascript页面右下角点击弹出窗口功能的相关步骤、原理与注意事项,需要的朋友可以参考下
功能需求
页面右下角默认存在一个悬浮按钮,点击按钮可在其上方弹出一个窗口区域,弹窗自身带有关闭按钮,也可以通过再次点击下方的按钮关闭右下角弹窗。
实现方法
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部分:
<div class="container"> <div class="content">页面内容</div> <div class="floating-button" onclick="togglePopup()">点击打开</div> <div class="popup" id="popup" style="display: none;"> <button onclick="closePopup()">X</button> <div class="popup-content"> <p>弹出窗口内容</p> </div> </div> </div>
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查询等)
完整实例:
<!DOCTYPE html> <html lang="zh_CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>页面右下角弹出窗口示例</title> <style> .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; } </style> </head> <body> <div class="container"> <div class="content">页面内容</div> <div class="floating-button" onclick="togglePopup()">点击打开</div> <div class="popup" id="popup" style="display: none;"> <button onclick="closePopup()">X</button> <div class="popup-content"> <p>弹出窗口内容</p> </div> </div> </div> <script> 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"; } </script> </body> </html>
感兴趣的同学还可以使用本站在线工具测试上述代码的运行效果:http://tools.jb51.net/code/HtmlJsRun