js实现遮罩层弹出框的⽅法
本⽂实例讲述了js实现遮罩层弹出框的⽅法。分享给⼤家供⼤家参考。具体分析如下：
昨天公司⽹站需要弹窗提⽰⼀些信息，要我在把弹窗的js代码和弹窗窗⼝html写在⼀起哪⾥需要就调⽤
js教程removechild不说那么多了，直接上代码，感觉肯定会有兼容问题，看到了请指出啊：
复制代码代码如下:
<style>
#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>
<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 = ateElement("div");
blackBg.id = "blackBg";
blackBg.style.position = "absolute";
blackBg.style.zIndex = "99999";
p = "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 = ElementById("blackBg");
blackBg && veChild(blackBg);
el.parentNode.style.display = "none";
}
/
/⾃动关闭
function autoClose(id) {
id = id || "H-dialog";
var blackBg = ElementById("blackBg");
var objDiv = ElementById(id);
setTimeout(function(){
blackBg && veChild(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 (documentpatMode == "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.documentpatMode != 'undefined' &&
window.documentpatMode != '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 = ElementById(popupId);
if (status) {
}
objDiv.style.display = "block";
objDiv.style.left = div_X + "px";
p = div_Y + "px";
autoClose(popupId);
}
</script>
希望本⽂所述对⼤家的javascript程序设计有所帮助。
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论