页面上弹出遮罩层的的方法:以下代码可直接复制粘贴到jsp页面相应位置进行使用
<style>
/* 遮罩层样式 */
.fullbg{
background-color: black;
display:none;
z-index:3;
position:absolute;
left:0px;
top:0px;
height: 780px;
width: 980px;
filter:Alpha(Opacity=30);
/* IE */
-moz-opacity:0.4;
/* Moz + FF */
opacity: 0.4;
}
.upPageDiv{position: absolute;z-index:4;background-color: white; left:100px;top:100px;height: 270px;width:500px;display:none;}
</style>
<script>
/**
* 关闭
* */
function close_fn(){
$(".fullbg").css("display","none");
$(".upPageDiv").css({"display":"none"});
}
</script>
附上关闭按钮图标
<!--jsp代码-->
<div class="fullbg" id="fullbg"> </div>
<div class="upPageDiv" id="upPageDiv" style="width:670px;height:490px;">
<span style="left:645px;top:0px;position: absolute;" οnclick="close_fn();" >
<img src="images/front/close.png" alt="close" />
</span>
<iframe id="upPageFrm" marginHeight="0" frameBorder="0" width="100%" height="100%"
src="" marginWidth="0" scrolling="no" allowtransparency="true">
</iframe>
</div>
注:在需要加载遮罩层界面的jsp代码最后加上上述一段代码,然后在触发的按钮上调用以下js方法即可弹出一个遮罩层。
打开遮罩层js
<script type="text/javascript">
function showBacklayer(){
var url = "遮罩层上显示页面的地址";
$("#upPageFrm").attr("src",url);
$(".fullbg").css("display","block");
$(".upPageDiv").css("display","block");
}
</script>