提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  前端

当前栏目

简单的Jquery遮罩层代码实例

jQuery实例代码 简单 遮罩
2023-06-13 09:15:12 时间

Css代码

复制代码代码如下:

 #brg
{
 width:100%;
 height:100%;
 background:#333;
 position:absolute;
 top:0;
 left:0;
 filter:alpha(opacity=60);
 -moz-opacity:0.6;
 opacity:0.6;
 position:absolute;
 top:0;
 left:0;
 display:none;
}
#showdiv
{
 width:100%;
 height:auto;
 position:absolute;
 left:300px;
 top:150px;
 z-index:330;
 display:none;
}
#testdiv
{
 width:800px;
 height:auto;
 margin:00;
 border:1pxsolid#4d4d4d;
 background:#f2f2f2;
}
#close
{
 width:200px;
 height:27px;
 line-height:27px;
 font-size:14px;
 font-weight:bold;
 border:1pxsolid#4d4d4d;
 text-align:center;
 cursor:pointer;
 margin:0auto;
 background:#333;
 color:#fff;
}

Html代码

复制代码代码如下:

 <divid="brg">
   </div>
   <divid="showdiv">
       <divid="close">
           关闭
       </div>
       <divid="testdiv">


 要显示的内容

       </div>
   </div>

Jquery代码

复制代码代码如下:
 $(document).ready(function(){
           varbheight=document.body.clientHeight;
           $("#btnAdd").click(function(){
               $("#brg").css("display","block");
               $("#showdiv").css("display","block");
               $("#brg").css("height",document.body.scrollHeight);
               $("#showdiv").css("top",document.body.scrollTop+100);
           });
           $("#close").click(function(){
               $("#brg").css("display","none");
               $("#showdiv").css("display","none");
           });
       });

相关文章