`
_Jason_
  • 浏览: 42844 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

JS实现弹出层,背景透明,可关闭,参照浏览器永远居中

UI 
阅读更多

声明:这是一个个人很喜欢的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')" />&nbsp;&nbsp;&nbsp;
<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>
分享到:
评论

相关推荐

    js+CSS实现弹出居中背景半透明div层的方法.docx

    JS+CSS 实现弹出居中背景半透明 div 层的方法 在 Web 开发中,弹出居中背景半透明 div 层是一种常见的交互效果,通过 JavaScript 和 CSS,我们可以轻松实现这种效果。在本文中,我们将详细介绍如何使用 JS+CSS 实现...

    弹出层居中

    标题“弹出层居中”涉及的是网页设计中常见的用户界面元素布局问题,特别是使用JavaScript库如jQuery实现的弹出窗口或对话框的居中显示。在这个场景中,"TestJQueryMaskLayer"可能是一个使用jQuery实现的遮罩层插件...

    ASP.NET 绝对居中弹出层

    在居中弹出层中,JavaScript负责计算浏览器窗口的大小,然后动态设置弹出层的位置,确保其始终居中。例如,可以使用`window.innerWidth`和`window.innerHeight`获取窗口尺寸,再通过调整弹出层的`left`和`top`样式...

    DIV始终居中的半透明弹出层.rar

    在网页设计中,"DIV始终居中的半透明弹出层"是一个常见的需求,它涉及到CSS布局、定位以及透明度设置等多个技术点。下面将详细解释这些知识点。 首先,`DIV`是HTML中的一个块级元素,常用于创建网页布局结构。在本...

    js弹出层居中可移动

    ### JS弹出层居中可移动技术解析 #### 一、引言 在网页开发过程中,弹出层(Modal)是一种常见的交互设计模式,用于在当前页面上展示额外的信息或功能,而无需重新加载页面。其中,弹出层能够居中显示并且可以被...

    jquery实现让弹出层绝对居中

    jQuery,一个广泛使用的JavaScript库,提供了丰富的功能来简化DOM操作,包括实现弹出层的居中对齐。本文将详细介绍如何使用jQuery实现弹出层的绝对居中。 首先,我们需要理解页面布局的基本概念。在HTML和CSS中,...

    js 实现弹出层

    一个弹出层通常包含以下几个部分:背景遮罩层、内容容器、关闭按钮(可选)以及可能的其他辅助元素。以下是一个简单的HTML结构示例: ```html &lt;div id="overlay" class="overlay"&gt;&lt;/div&gt; 弹出层标题 这里是弹...

    js+css 实现遮罩居中弹出层(随浏览器窗口滚动条滚动).docx

    JS+CSS 实现遮罩居中弹出层(随浏览器窗口滚动条滚动) 本文将详细介绍使用 JS 和 CSS 实现遮罩居中弹出层,并且随浏览器窗口滚动条滚动。该弹出层能够在浏览器窗口中居中显示,且随着浏览器窗口的滚动而滚动。 ...

    js弹出层可拖动兼容各大浏览器(20211002200327).pdf

    本文档“js弹出层可拖动兼容各大浏览器”提供了一个实现这种功能的示例代码,主要涉及到以下几个关键知识点: 1. **预加载图片**: 代码首先定义了一个数组`imgname`,包含了弹出层边框图片的路径,并通过循环预...

    Jquery实现的弹出层背景变黑

    在这个"Jquery实现的弹出层背景变黑"的项目中,我们将探讨如何使用jQuery来创建一个类似百度注册页面的弹出层效果,并且在弹出层出现时将背景变为黑色,增强用户界面的视觉体验。 首先,我们需要理解弹出层(Modal...

    jQuery弹出层垂直居中效果

    为了使弹出层在页面中保持垂直居中,我们可以使用CSS和JavaScript结合的方式来实现。 1. **CSS基础布局**: - 首先,为弹出层创建一个容器元素,并设置其 `position` 属性为 `absolute` 或 `fixed`,这样可以脱离...

    js实现弹出层的效果

    这样,我们就实现了基本的弹出层效果,包括打开、关闭、居中显示、过渡动画等功能。在实际项目中,可以根据需求进一步定制样式、添加更多的交互元素,以满足不同的应用场景。记住,良好的用户体验是关键,弹出层的...

    JS弹出层,js弹出DIV效果源码下载

    本资源提供的"JS弹出层,js弹出DIV效果源码下载"是一个运用JQUERY库实现的此类效果。 jQuery是一个广泛使用的JavaScript库,它简化了HTML文档遍历、事件处理、动画设计和Ajax交互。jQuery的核心特性包括选择器、DOM...

    jquery js css弹出居中的遮罩层

    在压缩包中的"js+jQuery+css弹出层"文件中,应该包含了相关的JavaScript代码文件(可能命名为`popup.js`或`jquery.popup.js`)、CSS样式表(如`popup.css`)以及HTML模板(可能为`index.html`),这些文件组合起来便...

    mvc5jquery弹出层居中并显示遮罩

    在本项目"Mvc5jQuery弹出层居中并显示遮罩"中,开发者利用Microsoft的ASP.NET MVC5框架和jQuery库,实现了弹出窗口的居中显示以及半透明遮罩效果,提升了用户界面的美观度和易用性。 首先,我们来了解一下MVC5框架...

    layui弹出层样式修改,使用css的background属性设置多个背景图附件

    总的来说,通过理解和利用CSS的`background`属性,我们可以灵活地在layui弹出层中应用多张背景图片,以实现个性化的设计需求。同时,配合layui的主题系统,可以更方便地管理和维护这些样式,让开发更加高效。

    一个简易的弹出框的框架,实现各种弹出层

    框架可能还提供了配置选项,允许调整弹出层的位置(如居中)、大小、动画效果、背景透明度等,以适应不同应用场景的需要。 此外,对于前端开发来说,兼容性是一个重要的考虑因素。"layer-v1.6.0"可能已经针对主流的...

    js实现的弹出层效果

    在JavaScript的世界里,实现弹出层效果是一种常见的交互设计,尤其在网页开发中,它能够为用户提供信息提示、对话框、表单填写等多样化功能。本篇将详细讲解如何使用纯JavaScript来创建一个弹出层效果,不依赖任何...

    55、Jquery可关闭的仿微博JS弹出层

    【标题】"55、Jquery可关闭的仿微博JS弹出层"涉及到的是使用jQuery库来实现一个具有关闭功能的、类似于微博中常见的轻量级弹出对话框效果。在网页交互设计中,弹出层是一种常用的用户体验设计元素,用于显示额外的...

Global site tag (gtag.js) - Google Analytics