最近网上搜索了一个比较不错 <全屏屏蔽、自动居中的lightBox>
代码如下:
代码
<!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>全屏屏蔽、自动居中的lightBox</title>
<style type="text/css">
*
{
margin: 0;
padding: 0;
}
html, body
{
height: 100%;
overflow: hidden;
font: 12px/1.5 simsun;
}
.myPage
{
overflow: auto;
width: 100%;
height: 100%;
}
.lightBox, .popupCover, .popupIframe, .popupComponent
{
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
}
.popupComponent
{
z-index: 2;
display: none;
}
.popupIframe
{
display: none;
_display: block;
_filter: alpha(opacity=0);
}
.popupCover
{
background: #000;
opacity: 0.7; *filter:alpha(opacity=70);}
.lightBox
{
text-align: center;
overflow: auto;
}
.lightBoxContent
{
display: inline-block; *display:inline;zoom:1;width:300px;padding:10px;background:#fff;border:5pxsolid#00b4ff;vertical-align:middle;}
.lightBoxMaxHeight
{
display: inline-block;
vertical-align: middle;
height: 100%; *height:99.5%;width:1px;overflow:hidden;margin-left:-1px;}
.lightBoxWrapper
{
display: inline-block; *display:inline;zoom:1;text-align:left;}
.lightBoxClose
{
color: #f00;
}
.lightBoxSubmit
{
margin-top: 10px;
padding-top: 5px;
border-top: 1px solid #ccc;
}
.lightBoxSubmit input
{
font-size: 12px;
padding: 0 10px;
overflow: visible;
margin: 0 5px;
}
</style>
</head>
<body>
<div class="myPage">
假装很丰富的内容<br />
假装很丰富的内容<br />
假装很丰富的内容<br />
假装很丰富的内容<br />
<div style="text-align: center;">
<input type="button" value="位于第一屏的按钮" onclick="showLayer('lightBox')" />
</div>
假装很丰富的内容<br />
假装很丰富的内容<br />
假装很丰富的内容<br />
假装很丰富的内容<br />
<select>
<option>一个用于测试IE6中是否能覆盖住的select</option>
</select>
<br />
假装很丰富的内容<br />
假装很丰富的内容<br />
假装很丰富的内容<br />
假装很丰富的内容<br />
假装很丰富的内容<br />
假装很丰富的内容<br />
假装很丰富的内容<br />
假装很丰富的内容<br />
假装很丰富的内容<br />
假装很丰富的内容<br />
假装很丰富的内容<br />
假装很丰富的内容<br />
<select>
<option>又一个用于测试IE6中是否能覆盖住的select</option>
</select>
<br />
假装很丰富的内容<br />
假装很丰富的内容<br />
假装很丰富的内容<br />
假装很丰富的内容<br />
<div style="text-align: center;">
<input type="button" value="位于第二屏中的按钮" onclick="showLayer('lightBox')" />
<input type="button" value="当内容已经超过了一屏的高度" onclick="showLayer('lightBox2')" />
</div>
假装很丰富的内容<br />
假装很丰富的内容<br />
假装很丰富的内容<br />
假装很丰富的内容<br />
假装很丰富的内容<br />
假装很丰富的内容<br />
假装很丰富的内容<br />
假装很丰富的内容<br />
假装很丰富的内容<br />
假装很丰富的内容<br />
假装很丰富的内容<br />
假装很丰富的内容<br />
</div>
<div class="popupComponent" id="lightBox2">
<iframe class="popupIframe"></iframe>
<div class="popupCover">
</div>
<div class="lightBox">
<div class="lightBoxContent">
<div class="lightBoxWrapper">
当内容已经超过了一屏的高度 当内容已经超过了一屏的高度 当内容已经超过了一屏的高度 当内容已经超过了一屏的高度<br />
当内容已经超过了一屏的高度 当内容已经超过了一屏的高度 当内容已经超过了一屏的高度 当内容已经超过了一屏的高度<br />
当内容已经超过了一屏的高度 当内容已经超过了一屏的高度 当内容已经超过了一屏的高度 当内容已经超过了一屏的高度<br />
当内容已经超过了一屏的高度 当内容已经超过了一屏的高度 当内容已经超过了一屏的高度 当内容已经超过了一屏的高度<br />
当内容已经超过了一屏的高度 当内容已经超过了一屏的高度 当内容已经超过了一屏的高度 当内容已经超过了一屏的高度<br />
当内容已经超过了一屏的高度 当内容已经超过了一屏的高度 当内容已经超过了一屏的高度 当内容已经超过了一屏的高度<br />
当内容已经超过了一屏的高度 当内容已经超过了一屏的高度 当内容已经超过了一屏的高度 当内容已经超过了一屏的高度<br />
当内容已经超过了一屏的高度 当内容已经超过了一屏的高度 当内容已经超过了一屏的高度 当内容已经超过了一屏的高度<br />
当内容已经超过了一屏的高度 当内容已经超过了一屏的高度 当内容已经超过了一屏的高度 当内容已经超过了一屏的高度<br />
当内容已经超过了一屏的高度 当内容已经超过了一屏的高度 当内容已经超过了一屏的高度 当内容已经超过了一屏的高度<br />
当内容已经超过了一屏的高度 当内容已经超过了一屏的高度 当内容已经超过了一屏的高度 当内容已经超过了一屏的高度<br />
当内容已经超过了一屏的高度 当内容已经超过了一屏的高度 当内容已经超过了一屏的高度 当内容已经超过了一屏的高度<br />
当内容已经超过了一屏的高度 当内容已经超过了一屏的高度 当内容已经超过了一屏的高度 当内容已经超过了一屏的高度<br />
当内容已经超过了一屏的高度 当内容已经超过了一屏的高度 当内容已经超过了一屏的高度 当内容已经超过了一屏的高度<br />
当内容已经超过了一屏的高度 当内容已经超过了一屏的高度 当内容已经超过了一屏的高度 当内容已经超过了一屏的高度<br />
当内容已经超过了一屏的高度 当内容已经超过了一屏的高度 当内容已经超过了一屏的高度 当内容已经超过了一屏的高度<br />
当内容已经超过了一屏的高度 当内容已经超过了一屏的高度 当内容已经超过了一屏的高度 当内容已经超过了一屏的高度<br />
当内容已经超过了一屏的高度 当内容已经超过了一屏的高度 当内容已经超过了一屏的高度 当内容已经超过了一屏的高度<br />
当内容已经超过了一屏的高度 当内容已经超过了一屏的高度 当内容已经超过了一屏的高度 当内容已经超过了一屏的高度<br />
当内容已经超过了一屏的高度 当内容已经超过了一屏的高度 当内容已经超过了一屏的高度 当内容已经超过了一屏的高度<br />
当内容已经超过了一屏的高度 当内容已经超过了一屏的高度 当内容已经超过了一屏的高度 当内容已经超过了一屏的高度<br />
当内容已经超过了一屏的高度 当内容已经超过了一屏的高度 当内容已经超过了一屏的高度 当内容已经超过了一屏的高度<br />
当内容已经超过了一屏的高度 当内容已经超过了一屏的高度 当内容已经超过了一屏的高度 当内容已经超过了一屏的高度<br />
</div>
<div class="lightBoxSubmit">
<input type="button" value="确定" onclick="hideLayer('lightBox2')" />
<input type="button" value="取消" onclick="hideLayer('lightBox2')" />
</div>
</div>
<span class="lightBoxMaxHeight"></span>
</div>
</div>
<div class="popupComponent" id="lightBox">
<iframe class="popupIframe"></iframe>
<div class="popupCover">
</div>
<div class="lightBox">
<span class="lightBoxMaxHeight"></span>
<div class="lightBoxContent">
<div class="lightBoxWrapper">
当提示小于一行时文字居中<br />
</div>
<div class="lightBoxSubmit">
<input type="button" value="确定" onclick="hideLayer('lightBox')" />
<input type="button" value="取消" onclick="hideLayer('lightBox')" />
</div>
</div>
</div>
</div>
<script type="text/javascript">
<!--
function showLayer(id) {
document.getElementById(id).style.display = "block";
}
function hideLayer(id) {
document.getElementById(id).style.display = "none";
}
// --></script>
<!--存在的两个细节性问题:
1. 大家可以看到完整demo中并未出现font-size:0;,而在垂直居中法中却出现了。
因为font-size:0在完整demo中,将使firefox3.5中读者完整阅读时lightBox的鼠标滚轮失效,原因不详,这一点大家可以作情处理。
2. maxHeight这东西只能放在lightBoxContent的后面,因为在opera9.6中会出现bug-->
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>全屏屏蔽、自动居中的lightBox</title>
<style type="text/css">
*
{
margin: 0;
padding: 0;
}
html, body
{
height: 100%;
overflow: hidden;
font: 12px/1.5 simsun;
}
.myPage
{
overflow: auto;
width: 100%;
height: 100%;
}
.lightBox, .popupCover, .popupIframe, .popupComponent
{
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
}
.popupComponent
{
z-index: 2;
display: none;
}
.popupIframe
{
display: none;
_display: block;
_filter: alpha(opacity=0);
}
.popupCover
{
background: #000;
opacity: 0.7; *filter:alpha(opacity=70);}
.lightBox
{
text-align: center;
overflow: auto;
}
.lightBoxContent
{
display: inline-block; *display:inline;zoom:1;width:300px;padding:10px;background:#fff;border:5pxsolid#00b4ff;vertical-align:middle;}
.lightBoxMaxHeight
{
display: inline-block;
vertical-align: middle;
height: 100%; *height:99.5%;width:1px;overflow:hidden;margin-left:-1px;}
.lightBoxWrapper
{
display: inline-block; *display:inline;zoom:1;text-align:left;}
.lightBoxClose
{
color: #f00;
}
.lightBoxSubmit
{
margin-top: 10px;
padding-top: 5px;
border-top: 1px solid #ccc;
}
.lightBoxSubmit input
{
font-size: 12px;
padding: 0 10px;
overflow: visible;
margin: 0 5px;
}
</style>
</head>
<body>
<div class="myPage">
假装很丰富的内容<br />
假装很丰富的内容<br />
假装很丰富的内容<br />
假装很丰富的内容<br />
<div style="text-align: center;">
<input type="button" value="位于第一屏的按钮" onclick="showLayer('lightBox')" />
</div>
假装很丰富的内容<br />
假装很丰富的内容<br />
假装很丰富的内容<br />
假装很丰富的内容<br />
<select>
<option>一个用于测试IE6中是否能覆盖住的select</option>
</select>
<br />
假装很丰富的内容<br />
假装很丰富的内容<br />
假装很丰富的内容<br />
假装很丰富的内容<br />
假装很丰富的内容<br />
假装很丰富的内容<br />
假装很丰富的内容<br />
假装很丰富的内容<br />
假装很丰富的内容<br />
假装很丰富的内容<br />
假装很丰富的内容<br />
假装很丰富的内容<br />
<select>
<option>又一个用于测试IE6中是否能覆盖住的select</option>
</select>
<br />
假装很丰富的内容<br />
假装很丰富的内容<br />
假装很丰富的内容<br />
假装很丰富的内容<br />
<div style="text-align: center;">
<input type="button" value="位于第二屏中的按钮" onclick="showLayer('lightBox')" />
<input type="button" value="当内容已经超过了一屏的高度" onclick="showLayer('lightBox2')" />
</div>
假装很丰富的内容<br />
假装很丰富的内容<br />
假装很丰富的内容<br />
假装很丰富的内容<br />
假装很丰富的内容<br />
假装很丰富的内容<br />
假装很丰富的内容<br />
假装很丰富的内容<br />
假装很丰富的内容<br />
假装很丰富的内容<br />
假装很丰富的内容<br />
假装很丰富的内容<br />
</div>
<div class="popupComponent" id="lightBox2">
<iframe class="popupIframe"></iframe>
<div class="popupCover">
</div>
<div class="lightBox">
<div class="lightBoxContent">
<div class="lightBoxWrapper">
当内容已经超过了一屏的高度 当内容已经超过了一屏的高度 当内容已经超过了一屏的高度 当内容已经超过了一屏的高度<br />
当内容已经超过了一屏的高度 当内容已经超过了一屏的高度 当内容已经超过了一屏的高度 当内容已经超过了一屏的高度<br />
当内容已经超过了一屏的高度 当内容已经超过了一屏的高度 当内容已经超过了一屏的高度 当内容已经超过了一屏的高度<br />
当内容已经超过了一屏的高度 当内容已经超过了一屏的高度 当内容已经超过了一屏的高度 当内容已经超过了一屏的高度<br />
当内容已经超过了一屏的高度 当内容已经超过了一屏的高度 当内容已经超过了一屏的高度 当内容已经超过了一屏的高度<br />
当内容已经超过了一屏的高度 当内容已经超过了一屏的高度 当内容已经超过了一屏的高度 当内容已经超过了一屏的高度<br />
当内容已经超过了一屏的高度 当内容已经超过了一屏的高度 当内容已经超过了一屏的高度 当内容已经超过了一屏的高度<br />
当内容已经超过了一屏的高度 当内容已经超过了一屏的高度 当内容已经超过了一屏的高度 当内容已经超过了一屏的高度<br />
当内容已经超过了一屏的高度 当内容已经超过了一屏的高度 当内容已经超过了一屏的高度 当内容已经超过了一屏的高度<br />
当内容已经超过了一屏的高度 当内容已经超过了一屏的高度 当内容已经超过了一屏的高度 当内容已经超过了一屏的高度<br />
当内容已经超过了一屏的高度 当内容已经超过了一屏的高度 当内容已经超过了一屏的高度 当内容已经超过了一屏的高度<br />
当内容已经超过了一屏的高度 当内容已经超过了一屏的高度 当内容已经超过了一屏的高度 当内容已经超过了一屏的高度<br />
当内容已经超过了一屏的高度 当内容已经超过了一屏的高度 当内容已经超过了一屏的高度 当内容已经超过了一屏的高度<br />
当内容已经超过了一屏的高度 当内容已经超过了一屏的高度 当内容已经超过了一屏的高度 当内容已经超过了一屏的高度<br />
当内容已经超过了一屏的高度 当内容已经超过了一屏的高度 当内容已经超过了一屏的高度 当内容已经超过了一屏的高度<br />
当内容已经超过了一屏的高度 当内容已经超过了一屏的高度 当内容已经超过了一屏的高度 当内容已经超过了一屏的高度<br />
当内容已经超过了一屏的高度 当内容已经超过了一屏的高度 当内容已经超过了一屏的高度 当内容已经超过了一屏的高度<br />
当内容已经超过了一屏的高度 当内容已经超过了一屏的高度 当内容已经超过了一屏的高度 当内容已经超过了一屏的高度<br />
当内容已经超过了一屏的高度 当内容已经超过了一屏的高度 当内容已经超过了一屏的高度 当内容已经超过了一屏的高度<br />
当内容已经超过了一屏的高度 当内容已经超过了一屏的高度 当内容已经超过了一屏的高度 当内容已经超过了一屏的高度<br />
当内容已经超过了一屏的高度 当内容已经超过了一屏的高度 当内容已经超过了一屏的高度 当内容已经超过了一屏的高度<br />
当内容已经超过了一屏的高度 当内容已经超过了一屏的高度 当内容已经超过了一屏的高度 当内容已经超过了一屏的高度<br />
当内容已经超过了一屏的高度 当内容已经超过了一屏的高度 当内容已经超过了一屏的高度 当内容已经超过了一屏的高度<br />
</div>
<div class="lightBoxSubmit">
<input type="button" value="确定" onclick="hideLayer('lightBox2')" />
<input type="button" value="取消" onclick="hideLayer('lightBox2')" />
</div>
</div>
<span class="lightBoxMaxHeight"></span>
</div>
</div>
<div class="popupComponent" id="lightBox">
<iframe class="popupIframe"></iframe>
<div class="popupCover">
</div>
<div class="lightBox">
<span class="lightBoxMaxHeight"></span>
<div class="lightBoxContent">
<div class="lightBoxWrapper">
当提示小于一行时文字居中<br />
</div>
<div class="lightBoxSubmit">
<input type="button" value="确定" onclick="hideLayer('lightBox')" />
<input type="button" value="取消" onclick="hideLayer('lightBox')" />
</div>
</div>
</div>
</div>
<script type="text/javascript">
<!--
function showLayer(id) {
document.getElementById(id).style.display = "block";
}
function hideLayer(id) {
document.getElementById(id).style.display = "none";
}
// --></script>
<!--存在的两个细节性问题:
1. 大家可以看到完整demo中并未出现font-size:0;,而在垂直居中法中却出现了。
因为font-size:0在完整demo中,将使firefox3.5中读者完整阅读时lightBox的鼠标滚轮失效,原因不详,这一点大家可以作情处理。
2. maxHeight这东西只能放在lightBoxContent的后面,因为在opera9.6中会出现bug-->
</body>
</html>