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

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


代码如下:

<!doctype html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
*{}{margin:0;padding:0;}
html{}{_background:url(about:blank);} /**//* 阻止闪动 in IE6 , 把空文件换成about:blank , 减少请求 */
body{}{background:#fff; font: 12px/1.5 Tahoma,Geneva, \\5b8b\\4f53, sans-serif; height:100%;}
.wrap{}{height:980px; padding-top:20px;text-align:center;}
p{}{font-size:14px;text-align:center;line-height:24px;}
/**//** 遮罩层 **/
#masklayer{}{
background:#000;
display:none;
filter:alpha(opacity = 50);
opacity:0.5;
top:0;
left:0;
height:100%;
width:100%;
z-index:999;
position:fixed;
_position:absolute;
_left: expression(documentElement.scrollLeft + documentElement.clientWidth - this.offsetWidth);
_top: expression(documentElement.scrollTop + documentElement.clientHeight - this.offsetHeight);
}
/**//** 弹出层 **/
#popup{}{
display:none;
width:300px;
z-index:1000;
left:50%;
top:50%;
position:fixed!important;
margin-left:-150px !important;
_position:absolute;
_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*/
}
.content{}{background:#f3f3f3;border:1px solid #999;}
.content h3{}{background:#a0a0a0;color:#fff;font-size:14px;height:32px;line-height:32px; padding-left:5px;}
#clickbtn{}{margin-top:20px;}
</style>
</head>
<body>
<div class="wrap">
<p>
我是正文我是正文我是正文我是正文我是正文我是正文我是正文
<br />
我是正文我是正文我是正文我是正文我是正文我是正文我是正文
<br />
我是正文我是正文我是正文我是正文我是正文我是正文我是正文
<br />
我是正文我是正文我是正文我是正文我是正文我是正文我是正文
<br />
我是正文我是正文我是正文我是正文我是正文我是正文我是正文
</p>
<input type="button" id="clickbtn" value="clike me" />
</div>
<div id="masklayer"></div>
<div id="popup">
<div class="content">
<h3>我是弹出层 有没有居中？</h3>
<p>居中居中居中居中居中居中</p>
<p>居中居中居中居中居中</p>
<p>居中居中居中居中</p>
<p>居中居中居中</p>
</div>
</div>
<script type="text/javascript">
(function(masklayer){
var clickbtn = document.getElementById('clickbtn');
clickbtn.onclick = function(){
var popup = document.getElementById('popup');
masklayer.style.display='block';
popup.style.display ='block';
var h = popup.clientHeight;
with(popup.style){
marginTop = -h/2+'px';
}
}
})(document.getElementById('masklayer'))
</script>
</body>

</html>

赞 (0)

相关推荐

  • 原生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=&qu

  • js实现鼠标移动到图片产生遮罩效果

    js实现鼠标移动到图片产生遮罩效果

    本文实例为大家分享了js实现鼠标移动到图片产生遮罩效果的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>mask</title> <style> .pic{ width:300px; height:250px; background:url(icon/pro

  • JS+CSS实现弹出全屏灰黑色透明遮罩效果的方法

    本文实例讲述了js+CSS实现弹出一个全屏灰黑色透明遮罩效果的方法.分享给大家供大家参考.具体分析如下: 在众多的网站都有这样的效果,当进行一定的操作之后,会弹出一个灰黑色的半透明的遮罩,在上面可以操作指定的内容,例如可以弹出一个登陆框之类的内容,下面就介绍一下如何实现此种效果,代码实例如下: 复制代码 代码如下: <!DOCTYPE html>    <html>    <head>    <meta charset=" utf-8">

  • 利用js实现遮罩以及弹出可移动登录窗口

    利用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>    <title></titl

  • Js制作简单弹出层DIV在页面居中 中间显示遮罩的具体方法

    这两天要用到正好练练手,比想象中碰到的问题要多,比如: ie6背景透明 ie6居中显示 还有对js对象的理解 openID=显示按钮,conID=需要显示的div,closeID=关闭按钮 解决了: 1.可以遮挡ie6下的select元素 但是在ie6下div没有透明度 2.弹出的div可以一直在浏览器屏幕中间显示 问题: 1.目前不支持.class 只支持#id 2.需要显示的div需要自己设置css 3.在ie6下需要设置css 例如div {_position: absolute;_top

  • js弹出div并显示遮罩层

    复制代码 代码如下: //--------------------弹出层------------------- //popDivId:弹出层div的ID //dragDivId:用于拖动div的ID //isShowMask:是否显示遮罩层 function popDivShow(popDivId, dragDivId, isShowMask) { if (isShowMask) { creatMask(popDivId); } var oWins = document.getElementBy

  • js点击按钮实现带遮罩层的弹出视频效果

    js点击按钮实现带遮罩层的弹出视频效果

    本文实例讲解了js点击按钮实现带遮罩层的弹出视频效果,涉及到css以及JavaScript,分享给大家供大家参考,具体内容如下 最终显示效果:点击红色按钮,会有视屏弹出 并带有遮罩层 点击黄色区域可以关闭视频 并回到最初的状态. 页面主要代码:main中主要包含一个a,控制显示的按钮.设置有id值. <div class="main"> <a href="javascript:;" class="video" id="

  • javascript div 遮罩层封锁整个页面

    具体解决方案如下: 一.IE和FF下document.body对象的clientHeight,offsetHeight,scrollHeight属性的差别. clientHeight 在IE和FF下,该属性没什么差别,都是指浏览器的可视区域,即除去浏览器的那些工具栏状态栏剩下的页面展示空间的高度. offsetHeight 在IE下,offsetHeight也是浏览器可视区域的高(包括边线) 在FF下,offsetHeight是页面具体内容的高度 scrollHeight 在IE下,scroll

  • JS遮罩层效果 兼容ie firefox jQuery遮罩层

    复制代码 代码如下: <!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=&qu

  • html 锁定页面(js遮罩层弹出div效果)

    复制代码 代码如下: <htmlxmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"/> <title>UntitledDocument</title> <script> function createIf

随机推荐