js实现遮罩层弹出框的方法
作者:shichen2014 发布时间:2024-02-23 09:01:33
本文实例讲述了js实现遮罩层弹出框的方法。分享给大家供大家参考。具体分析如下:
昨天公司网站需要弹窗提示一些信息,要我在把弹窗的js代码和弹窗窗口html写在一起哪里需要就调用
不说那么多了,直接上代码,感觉肯定会有兼容问题,看到了请指出啊:
<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 = 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程序设计有所帮助。
猜你喜欢
- 每天都要记得健康打卡尊敬的老师,我忘了这次的健康打卡,反思的时候我想了很多东西,反省了很多事情,自己也很懊悔,触犯了学校的规定,深刻认识到自
- 这里我们在SQL Server 2005\SQL Server 2008版本上通过举例子,说明临时表和表变量两者的一些特征,让我们对临时表和
- 例如:文本abcaBcabCaBCabcaBCa,关键字bc,在不区分大小写的情况,一共有6个匹配项。 则在网页中显示的是abcaBcabC
- 我们提到切片的时候,一般想到的大多数是分割列表。其实它还可以对列表进行拼接,想必这点是很多人不知道的,这就是切片的占位符用法。留在原列表中,
- 前段时间看到letcode上的元音字母字符串反转的题目,今天来研究一下字符串反转的内容。主要有三种方法:1.切片法(最简洁的一种)#切片法d
- 九宫格是一种比较古老的设计,它最基本的表现其实就像是一个三行三列的表格。其实它最初是在window的c/s结构中用得比较多,比如我们经常看到
- Redo LogREDO LOG称为重做日志 ,当MySQL服务器意外崩溃或者宕机后,保证已经提交的事务持久化到磁盘中(持久性)。InnoD
- 一. 使用logging模块时用python写代码时,logging模块最基本的几行配置,如下:import logginglogging.
- php代码很简单:$server="127.0.0.1";println("Begin");$lin
- 起步这是一个相当实用的内置模块,但是很多人竟然不知道他的存在——笔者也是今天偶然看到的,哎……尽管如此,还是改变不了这个模块好用的事实hea
- 一 、背景一般在数据仓库环境中,我们可以很方便的使用row_number函数根据某个维度来对数据进行分组,实现每个组内数据编号排序的效果。如
- pytorch自定义不可导激活函数今天自定义不可导函数的时候遇到了一个大坑。首先我需要自定义一个函数:sign_fimport torchf
- 引言使用 python 绘制网络训练过程中的的 loss 曲线以及准确率变化曲线,这里的主要思想就时先把想要的损失值以及准确率值保存下来,保
- 1、字典的概念Python中的字典数据类型和现实中的字典很像,它是以键值对(键和值的组合)的方式把数据组织到一起,可以通过键找到与之对应的值
- 1. document.form.item 问题 (1)现有问题:现有代码中存在许多 document.formName.item(&quo
- 简单介绍NumPy系统是Python的一种开源的数组计算扩展。这种工具可用来存储和处理大型矩阵,比Python自身的嵌套列表(nested
- 如下所示:data = { "北京":{ "昌平":{"沙河":[&
- 本文实例讲述了C# Ado.net读取SQLServer数据库存储过程列表及参数信息的方法。分享给大家供大家参考,具体如下:得到数据库存储过
- BP神经网络是最简单的神经网络模型了,三层能够模拟非线性函数效果。难点:如何确定初始化参数?如何确定隐含层节点数量?迭代多少次?如何更快收敛
- 记得刚学python那会,作过一个飞机大战小项目,这个项目非常经典,可以帮助初学者提高动手能力,今天把它分享出来。一、项目介绍先放几张图片二