遮罩层点击按钮弹出并且具有拖动和关闭效果（两种方法）

时间：2021-05-25

首先给大家展示演示效果：

基于JavaScript的网页弹出层，鼠标按在弹出层的标题栏处，可以拖动该浮动层随意移动位置，不需要时也可以关闭，操作体验舒服，兼容性好，IE/火狐等众多浏览器下运行稳定、反应快速。代码表现方面，简洁务实，不玩虚的，拿去学习也相当不错。

js代码

示例一：

<!DOCTYPE html><html xmlns="http://mon/js/jquery-1.4.2.min.js" type="text/javascript"></script><style>.black_overlay{display: none;position: absolute;top: 0%;left: 0%;width: 100%;height: 100%;background-color: black;z-index:1001;-moz-opacity: 0.8;opacity:.80;filter: alpha(opacity=80);}.white_content {display: none;position: absolute;top: 10%;left: 10%;width: 80%;height: 80%;border: 16px solid lightblue;background-color: white;z-index:1002;overflow: auto;}.white_content_small {display: none;position: absolute;top: 20%;left: 30%;width: 40%;height: 50%;border: 16px solid lightblue;background-color: white;z-index:1002;overflow: auto;}</style><script type="text/javascript">//弹出隐藏层function ShowDiv(show_div,bg_div){document.getElementById(show_div).style.display='block';document.getElementById(bg_div).style.display='block' ;var bgdiv = document.getElementById(bg_div);bgdiv.style.width = document.body.scrollWidth;// bgdiv.style.height = $(document).height();$("#"+bg_div).height($(document).height());};//关闭弹出层function CloseDiv(show_div,bg_div){document.getElementById(show_div).style.display='none';document.getElementById(bg_div).style.display='none';};</script></head><body><input id="Button1" type="button" value="点击弹出层" onclick="ShowDiv('MyDiv','fade')" /><!--弹出层时背景层DIV--><div id="fade" class="black_overlay"></div><div id="MyDiv" class="white_content"><div style="text-align: right; cursor: default; height: 40px;"><span style="font-size: 16px;" onclick="CloseDiv('MyDiv','fade')">关闭</span></div>目前来说，我还是喜欢这个自己改造的弹出层。自己在项目中也用的是这个。</div></body></html>

以上通过jq和js分别实现了遮罩层点击按钮弹出并且具有拖动和关闭效果，希望对大家有所帮助。

声明：本页内容来源网络，仅供用户参考；我单位不保证亦不表示资料全面及准确无误，也不保证亦不表示这些资料为最新信息，如因任何原因，本网内容或者用户因倚赖本网内容造成任何损失或损害，我单位将不会负任何法律责任。如涉及版权问题，请提交至online#300.cn邮箱联系删除。

相关文章