页面调用代码
<body>
<br /><br /><br /><br />
<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:900px; height:1000px; 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 /><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");
box.Fixed = true;
box.Over = true;
box.OverLay.Color = "#000";
box.Center = true;
$("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>
也可以 自己设置 box 属性 直接显示出来 自己做的是 提示登录框 很好用 可以覆盖Select