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

如何让JS弹出的层绝对屏幕居中

    博客分类：
  • Web
JavaScriptXHTMLprototypeIEHTML 
阅读更多 
<!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=utf-8" />
<title>无标题文档</title>
<style type="text/css">
/*弹出层的STYLE*/
html,body {height:100%; margin:0px; font-size:12px;}

.mydiv {
background-color: #ff6;
border: 1px solid #f90;
text-align: center;
line-height: 40px;
font-size: 12px;
font-weight: bold;
z-index:99;
width: 300px;
height: 120px;
left:50%;/*FF IE7*/
top: 50%;/*FF IE7*/

margin-left:-150px!important;/*FF IE7 该值为本身宽的一半 */
margin-top:-60px!important;/*FF IE7 该值为本身高的一半*/

margin-top:0px;

position:fixed!important;/*FF IE7*/
position:absolute;/*IE6*/

_top:       expression(eval(document.compatMode &&
            document.compatMode=='CSS1Compat') ?
            documentElement.scrollTop + (document.documentElement.clientHeight-this.offsetHeight)/2 :/*IE6*/
            document.body.scrollTop + (document.body.clientHeight - this.clientHeight)/2);/*IE5 IE5.5*/

}


.bg {
background-color: #ccc;
width: 100%;
height: 100%;
left:0;
top:0;/*FF IE7*/
filter:alpha(opacity=50);/*IE*/
opacity:0.5;/*FF*/
z-index:1;

position:fixed!important;/*FF IE7*/
position:absolute;/*IE6*/

_top:       expression(eval(document.compatMode &&
            document.compatMode=='CSS1Compat') ?
            documentElement.scrollTop + (document.documentElement.clientHeight-this.offsetHeight)/2 :/*IE6*/
            document.body.scrollTop + (document.body.clientHeight - this.clientHeight)/2);/*IE5 IE5.5*/

}
/*The END*/

</style>
<script type="text/javascript">
function showDiv(){
document.getElementById('popDiv').style.display='block';
document.getElementById('bg').style.display='block';
}

function closeDiv(){
document.getElementById('popDiv').style.display='none';
document.getElementById('bg').style.display='none';
}

</script>
</head>

<body>

<div id="popDiv" class="mydiv" style="display:none;">恭喜你！<br/>你的成绩为:60分<br/>
<a href="javascript:closeDiv()">关闭窗口</a></div>
<div id="bg" class="bg" style="display:none;"></div>


<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<div style="padding-top: 20px;">
<input type="Submit" name="" value="显示层" onclick="javascript:showDiv()" />
</div>
</body>
</html>

 

第二种

<!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>JavaScript 仿LightBox内容显示效果</title>   
</head>   
<body>     
<script>   
  
var isIE = (document.all) ? true : false;   
  
var isIE6 = isIE && ([/MSIE (\d)\.0/i.exec(navigator.userAgent)][0][1] == 6);   
  
var $ = function (id) {   
    return "string" == typeof id ? document.getElementById(id) : id;   
};   
  
var Class = {   
    create: function() {   
        return function() { this.initialize.apply(this, arguments); }   
    }   
}   
  
var Extend = function(destination, source) {   
    for (var property in source) {   
        destination[property] = source[property];   
    }   
}   
  
var Bind = function(object, fun) {   
    return function() {   
        return fun.apply(object, arguments);   
    }   
}   
  
var Each = function(list, fun){   
    for (var i = 0, len = list.length; i < len; i++) { fun(list[i], i); }   
};   
  
var Contains = function(a, b){   
    return a.contains ? a != b && a.contains(b) : !!(a.compareDocumentPosition(b) & 16);   
}   
  
  
var OverLay = Class.create();   
OverLay.prototype = {   
  initialize: function(options) {   
  
    this.SetOptions(options);   
       
    this.Lay = $(this.options.Lay) || document.body.insertBefore(document.createElement("div"), document.body.childNodes[0]);   
       
    this.Color = this.options.Color;   
    this.Opacity = parseInt(this.options.Opacity);   
    this.zIndex = parseInt(this.options.zIndex);   
       
    with(this.Lay.style){ display = "none"; zIndex = this.zIndex; left = top = 0; position = "fixed"; width = height = "100%"; }   
       
    if(isIE6){   
        this.Lay.style.position = "absolute";   
        //ie6设置覆盖层大小程序   
        this._resize = Bind(this, function(){   
            this.Lay.style.width = Math.max(document.documentElement.scrollWidth, document.documentElement.clientWidth) + "px";   
            this.Lay.style.height = Math.max(document.documentElement.scrollHeight, document.documentElement.clientHeight) + "px";   
        });   
        //遮盖select   
        this.Lay.innerHTML = '<iframe style="position:absolute;top:0;left:0;width:100%;height:100%;filter:alpha(opacity=0);"></iframe>'  
    }   
  },   
  //设置默认属性   
  SetOptions: function(options) {   
    this.options = {//默认值   
        Lay:        null,//覆盖层对象   
        Color:      "#fff",//背景色   
        Opacity:    50,//透明度(0-100)   
        zIndex:     1000//层叠顺序   
    };   
    Extend(this.options, options || {});   
  },   
  //显示   
  Show: function() {   
    //兼容ie6   
    if(isIE6){ this._resize(); window.attachEvent("onresize", this._resize); }   
    //设置样式   
    with(this.Lay.style){   
        //设置透明度   
        isIE ? filter = "alpha(opacity:" + this.Opacity + ")" : opacity = this.Opacity / 100;   
        backgroundColor = this.Color; display = "block";   
    }   
  },   
  //关闭   
  Close: function() {   
    this.Lay.style.display = "none";   
    if(isIE6){ window.detachEvent("onresize", this._resize); }   
  }   
};   
  
  
  
var LightBox = Class.create();   
LightBox.prototype = {   
  initialize: function(box, options) {   
       
    this.Box = $(box);//显示层   
       
    this.OverLay = new OverLay(options);//覆盖层   
       
    this.SetOptions(options);   
       
    this.Fixed = !!this.options.Fixed;   
    this.Over = !!this.options.Over;   
    this.Center = !!this.options.Center;   
    this.onShow = this.options.onShow;   
       
    this.Box.style.zIndex = this.OverLay.zIndex + 1;   
    this.Box.style.display = "none";   
       
    //兼容ie6用的属性   
    if(isIE6){   
        this._top = this._left = 0; this._select = [];   
        this._fixed = Bind(this, function(){ this.Center ? this.SetCenter() : this.SetFixed(); });   
    }   
  },   
  //设置默认属性   
  SetOptions: function(options) {   
    this.options = {//默认值   
        Over:   true,//是否显示覆盖层   
        Fixed:  false,//是否固定定位   
        Center: false,//是否居中   
        onShow: function(){}//显示时执行   
    };   
    Extend(this.options, options || {});   
  },   
  //兼容ie6的固定定位程序   
  SetFixed: function(){   
    this.Box.style.top = document.documentElement.scrollTop - this._top + this.Box.offsetTop + "px";   
    this.Box.style.left = document.documentElement.scrollLeft - this._left + this.Box.offsetLeft + "px";   
       
    this._top = document.documentElement.scrollTop; this._left = document.documentElement.scrollLeft;   
  },   
  //兼容ie6的居中定位程序   
  SetCenter: function(){   
    this.Box.style.marginTop = document.documentElement.scrollTop - this.Box.offsetHeight / 2 + "px";   
    this.Box.style.marginLeft = document.documentElement.scrollLeft - this.Box.offsetWidth / 2 + "px";   
  },   
  //显示   
  Show: function(options) {   
    //固定定位   
    this.Box.style.position = this.Fixed && !isIE6 ? "fixed" : "absolute";   
  
    //覆盖层   
    this.Over && this.OverLay.Show();   
       
    this.Box.style.display = "block";   
       
    //居中   
    if(this.Center){   
        this.Box.style.top = this.Box.style.left = "50%";   
        //设置margin   
        if(this.Fixed){   
            this.Box.style.marginTop = - this.Box.offsetHeight / 2 + "px";   
            this.Box.style.marginLeft = - this.Box.offsetWidth / 2 + "px";   
        }else{   
            this.SetCenter();   
        }   
    }   
       
    //兼容ie6   
    if(isIE6){   
        if(!this.Over){   
            //没有覆盖层ie6需要把不在Box上的select隐藏   
            this._select.length = 0;   
            Each(document.getElementsByTagName("select"), Bind(this, function(o){   
                if(!Contains(this.Box, o)){ o.style.visibility = "hidden"; this._select.push(o); }   
            }))   
        }   
        //设置显示位置   
        this.Center ? this.SetCenter() : this.Fixed && this.SetFixed();   
        //设置定位   
        this.Fixed && window.attachEvent("onscroll", this._fixed);   
    }   
       
    this.onShow();   
  },   
  //关闭   
  Close: function() {   
    this.Box.style.display = "none";   
    this.OverLay.Close();   
    if(isIE6){   
        window.detachEvent("onscroll", this._fixed);   
        Each(this._select, function(o){ o.style.visibility = "visible"; });   
    }   
  }   
};   
  
</script>   
  
  
<style>   
.lightbox{width:300px;background:#FFFFFF;border:1px solid #ccc;line-height:25px; top:20%; left:20%;}   
.lightbox dt{background:#f4f4f4; padding:5px;}   
</style>   
  
<dl id="idBox" class="lightbox">   
  <dt id="idBoxHead"><b>LightBox</b> </dt>   
  <dd>   
    内容显示   
    <br /><br />   
    <input name="" type="button" value=" 关闭 " id="idBoxCancel" />   
    <br /><br />   
  </dd>   
</dl>   
  
  
<div style="margin:0 auto; width:800px; height:500px; border:1px solid #000000;">   
  
<input type="button" value="关闭覆盖层" id="btnOverlay" />   
<input type="button" value="黑色覆盖层" id="btnOverColor" />   
<input type="button" value="全透覆盖层" id="btnOverOpacity" />   
<input type="button" value="定位效果" id="btnFixed" />   
<input type="button" value="居中效果" id="btnCenter" />   
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />   
<select>   
<option>覆盖select测试</option>   
</select>    
<input name="" type="button" value=" 打开 " id="idBoxOpen" />   
  
</div>   
  
  
  
<script>   
  
var box = new LightBox("idBox");   
  
$("idBoxCancel").onclick = function(){ box.Close(); }   
$("idBoxOpen").onclick = function(){ box.Show(); }   
  
$("btnOverlay").onclick = function(){   
    box.Close();   
    if(box.Over){   
        box.Over = false;   
        this.value = "打开覆盖层";   
    } else {   
        box.Over = true;   
        this.value = "关闭覆盖层";   
    }   
}   
  
$("btnOverColor").onclick = function(){   
    box.Close();   
    box.Over = true;   
    if(box.OverLay.Color == "#fff"){   
        box.OverLay.Color = "#000";   
        this.value = "白色覆盖层";   
    } else {   
        box.OverLay.Color = "#fff"  
        this.value = "黑色覆盖层";   
    }   
}   
  
$("btnOverOpacity").onclick = function(){   
    box.Close();   
    box.Over = true;   
    if(box.OverLay.Opacity == 0){   
        box.OverLay.Opacity = 50;   
        this.value = "全透覆盖层";   
    } else {   
        box.OverLay.Opacity = 0;   
        this.value = "半透覆盖层";   
    }   
}   
  
$("btnFixed").onclick = function(){   
    box.Close();   
    if(box.Fixed){   
        box.Fixed = false;   
        this.value = "定位效果";   
    } else {   
        box.Fixed = true;   
        this.value = "取消定位";   
    }   
}   
  
$("btnCenter").onclick = function(){   
    box.Close();   
    if(box.Center){   
        box.Center = false;   
        box.Box.style.left = box.Box.style.top = "20%";   
        box.Box.style.marginTop = box.Box.style.marginLeft = "0";   
        this.value = "居中效果";   
    } else {   
        box.Center = true;   
        this.value = "重新定位";   
    }   
}   
</script>   
  
</body>   
</html>

 

分享到：
| Tomcat6.0虚拟目录配置方法
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    弹出层居中

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

    ASP.NET 绝对居中弹出层

    综上所述，ASP.NET绝对居中弹出层的实现涉及到了前端和后端技术的结合，包括ASP.NET控件、JavaScript、CSS以及可能的SharePoint集成。通过合理的编程和设计，我们可以创建出满足企业级应用标准的弹出层，提供良好的...

    mvc5jquery弹出层居中并显示遮罩

    同时，JavaScript可以动态获取浏览器窗口的大小，以确保弹出层始终在屏幕中央。这里可能用到的关键代码包括`position: absolute;`、`left: 50%;`、`top: 50%;`以及使用负的margin值来修正居中的位置。 遮罩层则是一...

    jquery弹出层鼠标点击弹出层可浮动在屏幕滚动

    6. **自动居中**：在弹出层显示时，可以通过获取窗口大小和弹出层大小，动态计算并设置`left`和`top`属性，使弹出层始终位于页面中间。 7. **关闭机制**：通常还会提供一个关闭按钮或点击其他区域关闭弹出层的功能...

    弹出层居中问题版1

    4. **居中弹出层css控制问题版.html**：此文件可能涉及更复杂的CSS控制，比如响应式设计，使弹出层在不同屏幕尺寸下都能保持居中。这可能包括媒体查询（Media Queries）的应用，以适应不同的设备或窗口大小。 在...

    JS弹出层单纯的绝对定位居中示例代码

    在这篇关于“JS弹出层单纯的绝对定位居中示例代码”的文章中，作者详细介绍了如何通过JavaScript代码实现一个弹出层的绝对定位居中效果。以下是对文章中提到的知识点的详细说明： 1. HTML元素的定位属性：在HTML中...

    Jquery弹出div层窗口以及div屏幕居中,背景滤镜效果,div拖拽效果

    以上就是关于“jQuery弹出div层窗口、div屏幕居中、背景滤镜效果和div拖拽效果”的核心知识点。通过熟练掌握这些技巧，开发者可以创建更富有互动性和用户体验的网页应用。在实际开发中，还需要根据不同的项目需求，...

    弹出层改良版的popus.js

    "弹出层改良版的popus.js" 标题表明这是一个专门针对弹出层进行优化的JavaScript库，解决了原有弹出层位置不准确的问题，确保无论用户如何滚动页面，弹出层始终位于屏幕中央。 首先，让我们深入了解一下弹出层的...

    jQuery点击遮罩弹出层固定居中代码.zip

    弹出层则需要固定在屏幕中央，这涉及到定位技巧，如使用绝对定位，配合`top`、`left`属性计算出相对于视口中心的位置。同时，弹出层的大小、边框、内边距等也需要进行适当的定义。 再者，HTML5是现代网页开发的标准...

    弹出层效果（源代码）

    弹出层可能通过定位（absolute或fixed）使其相对于页面或屏幕居中，使用透明度或display属性来控制显示和隐藏，以及使用过渡动画增加用户体验。 - `position: absolute/fixed;`：绝对定位或固定定位使得弹出层可以...

    div弹出层 定位问题的 处理

    3. **居中对齐**：让`div`弹出层居中，可以采用以下几种方式： - 使用负边距：通过计算`div`的宽度和高度的一半，然后设置负的`margin-left`和`margin-top`来实现。 - 使用`transform`属性：设置`transform: ...

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

    在网页设计中，"DIV始终居中的半透明弹出层"是一种常见的用户界面元素，用于显示重要的信息或者交互，如提示、警告、登录框等。本文将深入探讨如何实现这样的功能，包括HTML结构、CSS样式以及可能涉及的JavaScript...

    jquery弹出层特效

    6. **响应式设计**：为了让弹出层在不同设备和屏幕尺寸上表现良好，可以使用媒体查询（Media Queries）进行适配。 在【Javascripters大作--jQuery弹层类】这个压缩包文件中，可能包含了实现这些功能的示例代码和...

    弹出层登录页面

    弹出层本身应居中对齐，可以使用绝对定位和CSS calc()函数计算位置。此外，过渡和动画效果可以提升用户体验，比如淡入淡出效果。 3. **HTML结构**：登录表单通常包含用户名/邮箱、密码输入框、登录按钮以及可能的...

    jquery实现弹出层完美居中效果

    在网页设计中，弹出层（也称为模态窗口或对话框）是一种常见的交互元素，用于展示重要信息、用户确认操作或...通过以上的方法，我们可以轻松地创建一个适应各种屏幕尺寸和滚动状态的居中弹出层，提升网页的用户体验。

    jQuery点击按钮弹出遮罩层且内容居中特效

    这篇文章主要讲解如何使用jQuery实现一个点击按钮后弹出遮罩层，并确保内容居中的特效。在Web开发中，这样的功能经常用于模态对话框或提示信息的展示。 首先，我们来看下HTML结构。HTML部分包括两个`&lt;section&gt;`元素...

    当鼠标经过控件时会弹出一个层

    - **响应式设计**：根据屏幕尺寸调整弹出层的位置和大小，使其在不同设备上都能正常显示。 - **动态加载内容**：利用Ajax技术动态加载弹出层的内容，减少初始页面加载时间。 ##### 4.2 优化建议 - **性能优化**：...

    javascript弹出一个层并增加一个覆盖层

    ### JavaScript弹出层与覆盖层实现详解 #### 一、背景介绍 在Web开发中，弹出层（Popup Layer）是一种常见的交互设计模式，用于显示额外的信息或收集用户输入，而不打断当前页面的正常流程。通常，弹出层会伴随着...

    自定义弹出框样式 alert修改

    3. **JavaScript动态生成内容**：利用JavaScript动态生成弹出框的内容，并处理关闭事件。 #### HTML与CSS代码解析 - **遮罩层**（`shield`）： - 使用`position: absolute;`将其定位为绝对定位。 - 设置宽度为`...

    js写一个弹出层并锁屏效果实现代码

    通过JavaScript，可以创建一个覆盖全屏的层来阻止用户与背景页面交互，同时弹出一个包含消息的层来显示重要信息。这种技术尤其适用于实现警告框、确认框、信息提示等。 要实现一个弹出层并锁屏效果，一般采用以下...

Magicbox
Global site tag (gtag.js) - Google Analytics