简单生成遮罩层的代码示例

页面上弹出遮罩层的的方法：以下代码可直接复制粘贴到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>