JavaScript实现全屏遮罩与居中弹窗的代码示例

JavaScript遮罩层弹窗实现方案

本文详细介绍了一种使用JavaScript实现遮罩层弹出框的技术方案，旨在为开发者提供可参考的实现思路。

在实际项目开发中，常遇到需要在页面任意位置调用弹窗提示的需求。为此，将弹窗的JavaScript逻辑与HTML结构封装在一起，便于复用和调用。

以下直接展示核心代码实现。需注意，该方案可能存在浏览器兼容性问题，若发现兼容异常，欢迎指正。

定义弹窗的基础样式，包括隐藏状态、绝对定位、高层级索引及固定宽度。
#H-dialog{display:none;position:absolute;z-index: 9999999;width:400px;height: auto; background-color: #fff;}
#H-dialog .close{float:right;font-size: 30px;margin-right: 10px;margin-top:5px;cursor:pointer;}
#H-dialog .title{height: 40px;padding-left:10px; font-size:20px; line-height:40px;}
#H-dialog #msgCont{height:36px; margin: 30px 0 50px;padding-left: 65px;font-size: 25px;line-height: 36px;vertical-align: middle; background: url(../Images/ui_alert.png) no-repeat 20px 50%;}
</style>
<div id="H-dialog">
<a class="close" onclick="popupClose(this)">×</a>
<div class="title">提示</div>
<div id="msgCont">内容</div>
</div>
JavaScript核心逻辑与居中算法<script type="text/javascript">
 //锁定背景屏幕
 function lockScreen() {
 var clientH = document.body.offsetHeight; //body高度
 var clientW = document.body.offsetWidth; //body宽度
 var docH = document.body.scrollHeight; //浏览器高度
 var docW = document.body.scrollWidth; //浏览器宽度
 var bgW = clientW > docW ? clientW : docW; //取有效宽
 var bgH = clientH > docH ? clientH : docH; //取有效高
 var blackBg = document.createElement("div");
 blackBg.id = "blackBg";
 blackBg.style.position = "absolute";
 blackBg.style.zIndex = "99999";
 blackBg.style.top = "0";
 blackBg.style.left = "0";
 blackBg.style.width = bgW+"px";
 blackBg.style.height = bgH+"px";
 blackBg.style.opacity = "0.4";
 blackBg.style.backgroundColor = "#333";
 document.body.appendChild(blackBg);
 }
 //关闭按钮事件
 function popupClose(el) {
 var blackBg = document.getElementById("blackBg");
 blackBg && document.body.removeChild(blackBg);
 el.parentNode.style.display = "none";
 }
 //自动关闭
 function autoClose(id) {
 id = id || "H-dialog";
 var blackBg = document.getElementById("blackBg");
 var objDiv = document.getElementById(id);
 setTimeout(function(){
 blackBg && document.body.removeChild(blackBg);
 objDiv.style.display = "none";
 },2000);
 }
 /**
 *功能 : 弹窗信息
 *参数1 : 提示信息内容
 *参数2 : 提示信息状态默认0 为提示信息,1为成功信息
 *参数3 : 弹窗div的id,默认"H-dialog"
 *参数4 : 弹窗内容的id,默认"msgCont"
 **/
 function showMsg(msg) {
 msg = msg || "请重新操作";
 var status = arguments[1] || 0,
 popupId = arguments[2] || "H-dialog",
 contentId = arguments[3] || "msgCont"; 
 lockScreen();
 //屏幕实际高宽
 var pageWidth = window.innerWidth;
 var pageHeight = window.innerHeight;
 if (typeof pageWidth != "number") {
 if (document.compatMode == "CSS1Compat") {
 pageWidth = document.documentElement.clientWidth;
 pageHeight = document.documentElement.clientHeight;
 } else {
 pageWidth = document.body.clientWidth;
 pageHeight = document.body.clientHeight;
 }
 }
 //滚动条高宽
 var scrollLeft = window.document.documentElement.scrollLeft;
 var scrollTop = 0;
 if (typeof window.pageYOffset != 'undefined') {
 scrollTop = window.pageYOffset;
 } else if (typeof window.document.compatMode != 'undefined' &&
 window.document.compatMode != 'BackCompat') {
 scrollTop = window.document.documentElement.scrollTop;
 } else if (typeof window.document.body != 'undefined') {
 scrollTop = window.document.body.scrollTop;
 }
var div_X = (pageWidth - 400) / 2 + scrollLeft;
 var div_Y = (pageHeight - 200) / 2 + scrollTop;
 var objDiv = document.getElementById(popupId);
 if (status) {
 document.getElementById(contentId).style.background = "url($Root/Assets/Images/ui_success.png) no-repeat 20px 50%";
 }
 document.getElementById(contentId).innerHTML = msg;
 objDiv.style.display = "block";
 objDiv.style.left = div_X + "px";
 objDiv.style.top = div_Y + "px";
 autoClose(popupId);
 }
</script>

希望本文提供的JavaScript弹窗实现方案能对相关程序设计工作有所帮助。