使用JS和CSS可以创建一个中间弹出来层的遮罩以居中对齐内容

发布时间：2023-08-19 14:33:28 所属栏目：教程来源：

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

代码如下:

<!doctype html>

<head>

<meta charset="utf-8" />

<title></title>

<style type="text/css">

*{}{margin:0;padding:0;}

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');

（编辑：聊城站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!