JS弹出对话框_JS弹出层遮盖效果_JS弹出一个层并且后面有遮盖

原创 2012年03月31日 12:50:15

最近时不时要做些网页,也时不是用到弹出框来显示一些确认信息,

为了方便我自己使用,所以写了一个简单的JS,

今天特意做了一个示例,简单实用,兼容性好;

弹出框在最大化、拖动改变窗口大小和拖动滚动条时都可居中显示;

起码很适合我使用!

示例如下:

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>

<script language="JavaScript" type="text/javascript">
//|------------------------------------------------------------------------------------
//|
//| 说明:JS弹出全屏遮盖的对话框(弹出层后面有遮盖效果,兼容主流浏览器)
//|       实现了在最大化、拖动改变窗口大小和拖动滚动条时都可居中显示。
//|
//| 注意:主要使用EV_modeAlert和EV_closeAlert这两个函数行了;
//|       (EV_modeAlert-弹出对话框,EV_closeAlert-关闭对话框);
//|       注意:使用时,请在body标签内(不要在其它元素内)写一div,
//|       再给这div赋一id属性,如:id="myMsgBox",
//|       然后就可以调用EV_modeAlert('myMsgBox')来显示了。
//|       还有,请给你这div设置css:display:none让它在开始时不显示。
//|
//| 作者:E旺,QQ:407542585,Blog:http://blog.csdn.net/envon123,(新手)
//|
//|------------------------------------------------------------------------------------
//|
//用来记录要显示的DIV的ID值
var EV_MsgBox_ID=""; //重要

//弹出对话窗口(msgID-要显示的div的id)
function EV_modeAlert(msgID){
	//创建大大的背景框
	var bgObj=document.createElement("div");
	bgObj.setAttribute('id','EV_bgModeAlertDiv');
	document.body.appendChild(bgObj);
	//背景框满窗口显示
	EV_Show_bgDiv();
	//把要显示的div居中显示
	EV_MsgBox_ID=msgID;
	EV_Show_msgDiv();
}

//关闭对话窗口
function EV_closeAlert(){
	var msgObj=document.getElementById(EV_MsgBox_ID);
	var bgObj=document.getElementById("EV_bgModeAlertDiv");
	msgObj.style.display="none";
	document.body.removeChild(bgObj);
	EV_MsgBox_ID="";
}

//窗口大小改变时更正显示大小和位置
window.onresize=function(){
	if (EV_MsgBox_ID.length>0){
		EV_Show_bgDiv();
		EV_Show_msgDiv();
	}
}

//窗口滚动条拖动时更正显示大小和位置
window.onscroll=function(){
	if (EV_MsgBox_ID.length>0){
		EV_Show_bgDiv();
		EV_Show_msgDiv();
	}
}

//把要显示的div居中显示
function EV_Show_msgDiv(){
	var msgObj   = document.getElementById(EV_MsgBox_ID);
	msgObj.style.display  = "block";
	var msgWidth = msgObj.scrollWidth;
	var msgHeight= msgObj.scrollHeight;
	var bgTop=EV_myScrollTop();
	var bgLeft=EV_myScrollLeft();
	var bgWidth=EV_myClientWidth();
	var bgHeight=EV_myClientHeight();
	var msgTop=bgTop+Math.round((bgHeight-msgHeight)/2);
	var msgLeft=bgLeft+Math.round((bgWidth-msgWidth)/2);
	msgObj.style.position = "absolute";
	msgObj.style.top      = msgTop+"px";
	msgObj.style.left     = msgLeft+"px";
	msgObj.style.zIndex   = "10001";
	
}
//背景框满窗口显示
function EV_Show_bgDiv(){
	var bgObj=document.getElementById("EV_bgModeAlertDiv");
	var bgWidth=EV_myClientWidth();
	var bgHeight=EV_myClientHeight();
	var bgTop=EV_myScrollTop();
	var bgLeft=EV_myScrollLeft();
	bgObj.style.position   = "absolute";
	bgObj.style.top        = bgTop+"px";
	bgObj.style.left       = bgLeft+"px";
	bgObj.style.width      = bgWidth + "px";
	bgObj.style.height     = bgHeight + "px";
	bgObj.style.zIndex     = "10000";
	bgObj.style.background = "#777";
	bgObj.style.filter     = "progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=60,finishOpacity=60);";
	bgObj.style.opacity    = "0.6";
}
//网页被卷去的上高度
function EV_myScrollTop(){
	var n=window.pageYOffset 
	|| document.documentElement.scrollTop 
	|| document.body.scrollTop || 0;
	return n;
}
//网页被卷去的左宽度
function EV_myScrollLeft(){
	var n=window.pageXOffset 
	|| document.documentElement.scrollLeft 
	|| document.body.scrollLeft || 0;
	return n;
}
//网页可见区域宽
function EV_myClientWidth(){
	var n=document.documentElement.clientWidth 
	|| document.body.clientWidth || 0;
	return n;
}
//网页可见区域高
function EV_myClientHeight(){
	var n=document.documentElement.clientHeight 
	|| document.body.clientHeight || 0;
	return n;
}
</script>

</head>
<body>
	<input type="button" value="弹出对话框" onclick="EV_modeAlert('envon')" /><br />
	<div style="width:700px; height:600px; border:1px solid #333333; margin:20px 0; line-height:300%; padding:30px;">
		百度百科是百度为网友提供的信息存储空间,是一部内容开放、自由的网络百科全书。
		百度百科本着平等、协作、分享、自由的互联网精神,提倡网络面前人人平等,所有人共同协作编写百科全书,
		让知识在一定的技术规则和文化脉络下得以不断组合和拓展。为用户提供一个创造性的网络平台,
		强调用户的参与和奉献精神,充分调动互联网所有用户的力量,汇聚上亿用户的头脑智慧,积极进行交流和分享,
		同时实现与搜索引擎的完美结合,从不同的层次上满足用户对信息的需求。
	</div>
	<!-- 下面这个div将会被弹出显示,其内容和样式自行编写 -->
	<div id="envon" style=" width:300px; background-color:#FFFFFF; border:1px solid #000000; padding:20px; overflow:hidden; display:none;">
		<a href="javascript:EV_closeAlert()">关闭</a>
		<p>Our name was inspired by a poem written 
		more than 800 years ago during the Song Dynasty. 
		The poem compares the search for a retreating beauty amid chaotic glamour with 
		the search for one's dream while confronted by life's many obstacles. </p>
	</div>
</body>
</html>

 

 下面是一效果图:

 

 

 

版权声明:本文为博主原创文章,未经博主允许不得转载。

JavaScript实现弹出层代码

弹出层效果应该说很是常见了,下面是使用原生JavaScript实现弹出从的方法。好了,废话不多说了。一言不合就上代码。。弹出层js部分代码: 样式表代码如下: * { pa...
  • u014695532
  • u014695532
  • 2016年09月15日 21:01
  • 473

javascript弹出层

javascript简单的弹出层 window.onload=function(){ function...
  • wuzhe128520
  • wuzhe128520
  • 2016年01月08日 16:28
  • 180

JS 弹出遮罩层,内部为DIV

.mainlist{padding:10px;} .mainlist div {margin:0 5px 0 0;font-family:"宋体";font-size:12px;font-weigh...
  • a5251199
  • a5251199
  • 2015年11月12日 11:36
  • 977

html+css+js实现弹出框+遮罩层

最近看到好多童鞋都在找弹出框和遮罩层的实现。 先来说遮罩层是个神马? 其实就是你弹出个东西,然后其他地方变黑了一点。就像遮住了其他地方一样。 那么实现原理呢? 就是设置一个div,宽度,高度是屏幕...
  • yy839126257
  • yy839126257
  • 2015年04月17日 14:45
  • 3268

layer.js 弹出层提交form表单,action重定向

layer.js,一个jquery的插件,可以用它来做信息提示,弹出层等。  官方demo地址:http://layer.layui.com/ 官方api地址:http://layer.layui.c...
  • AHAU10
  • AHAU10
  • 2016年04月28日 19:33
  • 27497

使用JS实现弹出层

简单的测试页面
  • yanmingming1989
  • yanmingming1989
  • 2011年08月04日 10:01
  • 2931

Jquery超简单遮罩层实现代码

在开发中,为了避免二次提交,遮罩层的运用越来越普遍 找了很多
  • tolcf
  • tolcf
  • 2014年08月20日 21:36
  • 95819

用 js 实现“div的遮罩”效果

需求:点击“排序”按钮,生成div遮罩效果,如图: html代码:两个按钮 html代码:遮罩效果 排序 状...
  • hlbt0112
  • hlbt0112
  • 2016年09月13日 15:22
  • 3748

dialog 被另外一个dialog覆盖,生命周期如何执行

dialog 被另外一个dialog覆盖,生命周期如何执行 1,自定义dialog,在构造方法中设置dialog style, @null false ...
  • tw2421669722
  • tw2421669722
  • 2017年05月27日 16:23
  • 558

jQuery点击空白处隐藏弹出层

一款jQuery点击空白处隐藏弹出层网页特效,点击按钮弹出层、点击页面空白处弹出层消失JS代码。主要功能是点击按钮弹出层显示,然后通过点击页面任意位置都能关闭弹出层显示效果,主要是$(document...
  • Sky786905664
  • Sky786905664
  • 2016年11月23日 19:36
  • 6523
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:JS弹出对话框_JS弹出层遮盖效果_JS弹出一个层并且后面有遮盖
举报原因:
原因补充:

(最多只允许输入30个字)