弹出div层，简易，周围变灰

最新推荐文章于 2023-07-26 15:25:10 发布

一七得七

最新推荐文章于 2023-07-26 15:25:10 发布

阅读量2.8k

点赞数

分类专栏： web实践

web实践专栏收录该内容

6 篇文章 0 订阅

订阅专栏

原链接：http://blog.csdn.net/kouwoo/article/details/43149213

点击之后，原页面变灰，并弹出一个div层显示bulabula内容

变灰的实现：加一个jQuery 遮罩

具体代码：

<html>  
<head>  
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
    <title>弹出DIV</title>  
    <style>  
        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" src="jquery-1.8.2.js"></script>  
    <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>  
    <form>  
        <div id="main">  
            <a href="javascript:showBg();">点击这里查看效果</a>  
            <div id="fullbg"></div>  
            <div id="dialog">  
                <p class="close">  
                    <a href="#" οnclick="closeBg();">关闭</a></p>  
                    <div>正在加载，请稍后....</div>  
            </div>  
        </div>  
    </form>  
</body>  
</html>

需要jquery-1.8.2.js包

实现的效果：

单击时：

一七得七

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
弹出div层，简易，周围变灰

原链接：http://blog.csdn.net/kouwoo/article/details/43149213点击之后，原页面变灰，并弹出一个div层显示bulabula内容变灰的实现：加一个jQuery 遮罩具体代码：弹出DIV body { font-family: Aria
复制链接

扫一扫