`
- 浏览:
42847 次
- 性别:
- 来自:
北京
-
JS实现弹出层,背景透明,可关闭,参照浏览器永远居中
声明:这是一个个人很喜欢的JS实现,所以copy来了,学习效仿~
<!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>Jason</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让它在开始时不显示
//|------------------------------------------------------------------------------------
//|
//用来记录要显示的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')" />
<input type="button" value="弹出对话框-可扩展" onclick="EV_modeAlert('envon1')" /><br />
<!-- 下面这个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>
<div id="envon1" style=" width:300px; background-color:#F00FFF; border:10px solid #000000; padding:20px; overflow:hidden; display:none;">
<a href="javascript:EV_closeAlert()">关闭</a>
<p>THANK YOU!!!!!
</p>
</div>
</body>
</html>
分享到:
Global site tag (gtag.js) - Google Analytics
相关推荐
JS+CSS 实现弹出居中背景半透明 div 层的方法 在 Web 开发中,弹出居中背景半透明 div 层是一种常见的交互效果,通过 JavaScript 和 CSS,我们可以轻松实现这种效果。在本文中,我们将详细介绍如何使用 JS+CSS 实现...
标题“弹出层居中”涉及的是网页设计中常见的用户界面元素布局问题,特别是使用JavaScript库如jQuery实现的弹出窗口或对话框的居中显示。在这个场景中,"TestJQueryMaskLayer"可能是一个使用jQuery实现的遮罩层插件...
在居中弹出层中,JavaScript负责计算浏览器窗口的大小,然后动态设置弹出层的位置,确保其始终居中。例如,可以使用`window.innerWidth`和`window.innerHeight`获取窗口尺寸,再通过调整弹出层的`left`和`top`样式...
在网页设计中,"DIV始终居中的半透明弹出层"是一个常见的需求,它涉及到CSS布局、定位以及透明度设置等多个技术点。下面将详细解释这些知识点。 首先,`DIV`是HTML中的一个块级元素,常用于创建网页布局结构。在本...
### JS弹出层居中可移动技术解析 #### 一、引言 在网页开发过程中,弹出层(Modal)是一种常见的交互设计模式,用于在当前页面上展示额外的信息或功能,而无需重新加载页面。其中,弹出层能够居中显示并且可以被...
jQuery,一个广泛使用的JavaScript库,提供了丰富的功能来简化DOM操作,包括实现弹出层的居中对齐。本文将详细介绍如何使用jQuery实现弹出层的绝对居中。 首先,我们需要理解页面布局的基本概念。在HTML和CSS中,...
一个弹出层通常包含以下几个部分:背景遮罩层、内容容器、关闭按钮(可选)以及可能的其他辅助元素。以下是一个简单的HTML结构示例: ```html <div id="overlay" class="overlay"></div> 弹出层标题 这里是弹...
JS+CSS 实现遮罩居中弹出层(随浏览器窗口滚动条滚动) 本文将详细介绍使用 JS 和 CSS 实现遮罩居中弹出层,并且随浏览器窗口滚动条滚动。该弹出层能够在浏览器窗口中居中显示,且随着浏览器窗口的滚动而滚动。 ...
本文档“js弹出层可拖动兼容各大浏览器”提供了一个实现这种功能的示例代码,主要涉及到以下几个关键知识点: 1. **预加载图片**: 代码首先定义了一个数组`imgname`,包含了弹出层边框图片的路径,并通过循环预...
在这个"Jquery实现的弹出层背景变黑"的项目中,我们将探讨如何使用jQuery来创建一个类似百度注册页面的弹出层效果,并且在弹出层出现时将背景变为黑色,增强用户界面的视觉体验。 首先,我们需要理解弹出层(Modal...
为了使弹出层在页面中保持垂直居中,我们可以使用CSS和JavaScript结合的方式来实现。 1. **CSS基础布局**: - 首先,为弹出层创建一个容器元素,并设置其 `position` 属性为 `absolute` 或 `fixed`,这样可以脱离...
这样,我们就实现了基本的弹出层效果,包括打开、关闭、居中显示、过渡动画等功能。在实际项目中,可以根据需求进一步定制样式、添加更多的交互元素,以满足不同的应用场景。记住,良好的用户体验是关键,弹出层的...
本资源提供的"JS弹出层,js弹出DIV效果源码下载"是一个运用JQUERY库实现的此类效果。 jQuery是一个广泛使用的JavaScript库,它简化了HTML文档遍历、事件处理、动画设计和Ajax交互。jQuery的核心特性包括选择器、DOM...
在压缩包中的"js+jQuery+css弹出层"文件中,应该包含了相关的JavaScript代码文件(可能命名为`popup.js`或`jquery.popup.js`)、CSS样式表(如`popup.css`)以及HTML模板(可能为`index.html`),这些文件组合起来便...
在本项目"Mvc5jQuery弹出层居中并显示遮罩"中,开发者利用Microsoft的ASP.NET MVC5框架和jQuery库,实现了弹出窗口的居中显示以及半透明遮罩效果,提升了用户界面的美观度和易用性。 首先,我们来了解一下MVC5框架...
总的来说,通过理解和利用CSS的`background`属性,我们可以灵活地在layui弹出层中应用多张背景图片,以实现个性化的设计需求。同时,配合layui的主题系统,可以更方便地管理和维护这些样式,让开发更加高效。
框架可能还提供了配置选项,允许调整弹出层的位置(如居中)、大小、动画效果、背景透明度等,以适应不同应用场景的需要。 此外,对于前端开发来说,兼容性是一个重要的考虑因素。"layer-v1.6.0"可能已经针对主流的...
在JavaScript的世界里,实现弹出层效果是一种常见的交互设计,尤其在网页开发中,它能够为用户提供信息提示、对话框、表单填写等多样化功能。本篇将详细讲解如何使用纯JavaScript来创建一个弹出层效果,不依赖任何...
【标题】"55、Jquery可关闭的仿微博JS弹出层"涉及到的是使用jQuery库来实现一个具有关闭功能的、类似于微博中常见的轻量级弹出对话框效果。在网页交互设计中,弹出层是一种常用的用户体验设计元素,用于显示额外的...