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

lzkyo

浏览: 465981 次
性别:
来自: 北京

最近访客更多访客>>

u012510188

1927105

bjyuzhaocai

闽南仔-蔚蓝

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

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

博客分类：

JavaScript XHTML prototype IE 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=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>

分享到：

控制TD中图片的大小 | Tomcat6.0虚拟目录配置方法

2010-03-29 10:33
浏览 2721
评论(0)
分类:Web前端
查看更多

发表评论

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

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

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

评论

发表评论

javascript两种渐变效果进度条的实现

javascript 动态添加删除控件

判断浏览器类型

fckeditor unterminated string literal

JSP页面刷新重复提交数据解决方法总结

jsp统计在线人数和在线注册人数

jQuery进度条插件 jQuery progressBar

Page-taglib-2.0

四步学习Meta标签

JavaScript使用cookie,参数设置,说明;读取,写入,删除函数

getRequestDispatcher()与sendRedirect()区别

Web中的相对路径与绝对路径

常用正则表达式

控制TD中图片的大小

最近访客更多访客>>