最近时不时要做些网页，也时不是用到弹出框来显示一些确认信息，
为了方便我自己使用，所以写了一个简单的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弹出遮盖层"是一个常见且实用的技术，用于创建对话框、提示框或者加载指示器等效果，提供更好的用户体验。 首先，我们需要了解遮盖层（Overlay）的概念。遮盖层是在网页上覆盖一层半透明...
弹出层，也称为模态窗口，是在用户与网页交互时临时出现在页面上的一个浮动元素，它遮盖住背景内容，直到用户与弹出层进行交互或关闭它。弹出层可以用于展示详细信息、进行表单填写、播放媒体等，而不干扰用户对主...
这里，我们主要讨论如何使用jQuery实现这样的功能，即在一个弹出层（通常是一个模态对话框）显示时，用户可以操作父页面而不会导致弹出层关闭。 首先，jQuery是一个强大的JavaScript库，它提供了丰富的API来处理DOM...
在这个项目中，我们讨论的是如何使用这两种语言来创建一个可拖动的弹出层，并实现兼容IE7及以上版本，包括Firefox和Chrome在内的多种浏览器的锁屏效果。这个功能在网页应用中很常见，比如在显示模态对话框或提示信息...
2. **CSS 遮盖层**：遮盖层通常是一个全屏的半透明背景，用于遮挡页面上的其他元素，使用户注意力集中于弹出层。通过设置CSS的`position`属性为`fixed`或`absolute`，使其相对于窗口或父元素定位，配合`z-index`来...
这种效果通常应用于需要显示详细信息、模态对话框或菜单等场景，用户点击某一元素后，一个半透明的遮罩层会覆盖整个页面，同时一个浮动层（通常包含更多信息或功能）在屏幕中央出现。以下是对这个主题的详细解释： ...
2. **控制显示与隐藏**：在小程序的JS文件中，我们需要一个状态变量（如`showPopup`）来控制弹出层的显示与隐藏。初始时，`showPopup`设为`false`，当用户点击触发按钮时，将其设为`true`，弹出层显现；反之，点击...
在网页开发中，jQuery是一个非常流行的JavaScript库，它极大地简化了DOM操作、事件处理和动画效果。本教程将深入探讨如何使用jQuery实现“超好用的弹出框和遮盖层”。 首先，让我们理解弹出框（Popup）和遮盖层...
在网页开发中，有时我们需要实现一个功能，即在iframe中打开一个新的弹出窗口，并且这个弹出窗口能够遮罩住其父级页面，提供一种更好的用户体验。标题"iframe弹出框遮罩父类页面"正是关于这个技术点的讨论。在描述中...
总的来说，jQuery popup javascript弹出窗口的实现涉及到JavaScript编程、CSS样式设计、事件处理、浏览器兼容性优化等多个方面，是一个综合性的网页开发任务。通过研究提供的文件，可以深入理解这些技术的结合应用。
遮罩层则是一种增强用户体验的常见手法，它通常是一个全屏的半透明div，用于遮盖背景页面，使用户焦点集中在弹出层上。在CSS中，可以设置遮罩层的`z-index`属性使其位于其他元素之上，`opacity`属性控制其透明度，而...
// 假设有一个触发弹出层的按钮 var button = document.getElementById('triggerButton'); button.addEventListener('click', showPopup); ``` 4. **交互元素**：弹出层内可包含其他交互元素，如按钮、表单、...
背景遮罩层是一个全屏的半透明层，用于遮盖主页面内容，突出弹出层；内容展示层则包含实际需要展示的信息。 在HTML部分，我们可以创建一个隐藏的弹出层div，比如这样： ```html <div id="mask"></div> <!-- ...
"Jquery做的遮盖层"是一个常见的需求，用于在网页上创建一个半透明的覆盖层，通常用于加载提示、弹出框或阻止用户在特定操作期间与页面交互。以下是对这个主题的详细讲解： 首先，让我们理解遮盖层（Overlay）的...
本教程将详细讲解如何使用纯JavaScript实现一个可自定义背景、效果和定位的遮罩层。 首先，我们需要创建HTML结构。一个简单的遮罩层通常由一个全屏的透明或半透明div组成，我们可以将这个div命名为"mask"。例如： ...
而jQuery UI则是在jQuery基础上扩展的一套交互式用户界面组件库，其中包括一个强大的对话框（Dialog）功能，即“jQuery dialog弹出层”。这个弹出层在网页应用中广泛用于创建模态或非模态警告、提示、确认或者更复杂...
在网页设计中，"javascript 层遮罩效果"是一种常见的交互设计手法，它通常用于创建弹出式对话框、模态窗口或者加载提示等场景。当你点击“用户登录”按钮时，一个半透明的遮罩层会覆盖整个页面，使得用户只能与弹出...
标题和描述中提到的"基于vue开发的popup的mixins用于管理弹出框的遮盖层"，就是这样一个设计模式，旨在解决如何优雅地处理弹出框及其遮盖层的问题。 首先，我们来理解一下`mixins`在Vue.js中的作用。`mixins`是一种...
要创建一个基本的jQuery弹出遮盖层，首先需要在HTML文件中设置结构。可以创建一个隐藏的div作为遮盖层，并设置相应的CSS样式。例如： ```html ; position:fixed; top:0; left:0; width:100%; height:100%; ...
"防遮盖JQUERY对话框"是针对一种常见问题的解决方案，即当对话框弹出时，可能会被页面上的其他元素如Flash、嵌入式视频等遮挡，影响用户体验。本篇将详细讲解如何实现这样的功能。 首先，理解jQuery对话框的工作...