一个简单的遮罩弹窗

最新推荐文章于 2021-08-16 14:35:39 发布

小狗爱臂章

最新推荐文章于 2021-08-16 14:35:39 发布

阅读量835

点赞数

分类专栏： javaweb

javaweb 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="zh-CN">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<!-- WP Head -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>

<style type="text/css">


 body {
     font-family:Arial, Helvetica, sans-serif;
     font-size:12px;
     margin:0;
 }
 #main {
     height:1800px;
     padding-top:90px;
     text-align:center;
 }
 #fullbg {
     background-color:gray;
     left:0;
     opacity:0.5;
     position:absolute;
     top:0;
     z-index:3;
     filter:alpha(opacity=50);
     -moz-opacity:0.5;
     -khtml-opacity:0.5;
 }
 #dialog {
     background-color:#fff;
     border:5px solid rgba(0,0,0, 0.4);
     height:400px;
     left:50%;
     margin:-200px 0 0 -200px;
     padding:1px;
     position:fixed !important; /* 浮动对话框 */
     position:absolute;
     top:50%;
     width:400px;
     z-index:5;
     border-radius:5px;
     display:none;
 }
 #dialog p {
     margin:0 0 12px;
     height:24px;
     line-height:24px;
     background:#CCCCCC;
 }
 #dialog p.close {
     text-align:right;
     padding-right:10px;
 }
 #dialog p.close a {
     color:#fff;
     text-decoration:none;
 }

</style>

<script type="text/javascript">
     //显示灰色 jQuery 遮罩层
    function showBg() {
         var bh = $("body").height();
         var bw = $("body").width();

         $("#fullbg").css({
             height:bh,
             width:bw,
             display:"block"
         });
         $("#dialog").show();
     }
     //关闭灰色 jQuery 遮罩
    function closeBg() {
         $("#fullbg,#dialog").hide();
     }
</script>
</head>
<body>
 <div id="main"><a href="javascript:showBg();">点击这里查看效果</a>
         <div id="dialog">
         <p class="close"><a href="#" οnclick="closeBg();">关闭</a></p>
         <div><h1>正在加载，请稍后....</h1></div>
         </div>
 </div>
 </body>
 </html>