jQuery+css+html实现页面遮罩弹出框

最新推荐文章于 2024-06-20 09:54:27 发布

chelen_jak

最新推荐文章于 2024-06-20 09:54:27 发布

阅读量1.5k

点赞数

分类专栏： CSS JavaScript HTML5 基础知识

JavaScript 同时被 3 个专栏收录

311 篇文章 3 订阅

订阅专栏

CSS

191 篇文章 0 订阅

订阅专栏

基础知识

160 篇文章 0 订阅

订阅专栏

转自： http://www.jb51.net/article/34951.htm

面遮罩弹出框已经不是一个陌生的话题了，实现的方法大同小异多种多样，今天用jQuery实现页面遮罩弹出框，主要用的技术有JQuery，css和html,感兴趣的朋友可以参考下哈页面遮罩弹出框是最常见的一种情况，今天用jQuery实现页面遮罩弹出框，主要用的技术有JQuery，css和html,

代码如下：

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <script src="http://code.jquery.com/jquery-latest.js"></script>
    <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>
</head>
<body>
    <div id="main">
        <a href="javascript:showBg();">点击这里查看效果</a>
        <div>
            <a href="#" οnclick="sayHi();" >Say Hi</a>
        </div>
        <div id="fullbg">
        </div>
        <div id="dialog">
            <p class="close">
                <a href="#" οnclick="closeBg();">关闭</a></p>
            <div>
                正在加载，请稍后....</div>
        </div>
    </div>
    <script type="text/javascript">
        function sayHi() {
            alert("Hi! Hi!");
        }
        //显示灰色 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>
</body>
</html>

效果图：