前端开发入门工具_div 、CSS 、 jQuery 实现遮罩

什么是前端项目开发?|开发手机网站用什么前端ui?|web前端开发的专业工具

弹出层—遮罩效果的实现。

html 代码片段

<!DOCTYPE html>
<html lang=”en”>
<head>
    <meta charset=”UTF-8″>
    <title>前端开发工作周报模板</title>
    <script src=”//cdn.bootcss.com/jquery/1.11.3/jquery.min.js”></script>
    <style>
        /* box */
        .box {
            position: absolute;
            width: 600px;
            left: 50%;
            height: auto;
            z-index: 100;
            background-color: #fff;
            border: 1px #ddd solid;
            padding: 1px;
        }
        .box h2 {
            height: 25px;
            font-size: 14px;
            background-color: #aaa;
            position: relative;
            padding-left: 10px;
            line-height: 25px;
            color: #fff;
        }
        .box h2 a {
            position: absolute;
            right: 5px;
            font-size: 12px;
            color: #fff;
        }
        .box .list {
            padding: 10px;
        }
        .box .list li {
            height: 24px;
            line-height: 24px;
        }
        .box .list li span {
            margin: 0 5px 0 0;
            font-family: “宋体”;
            font-size: 12px;
            font-weight: 400;
            color: #ddd;
        }
        .showbtn {
            font: bold 24px ‘微软雅黑’;
        }
        #bg {
            background-color: #000;
            position: absolute;
            z-index: 99;
            left: 0;
            top: 0;
            display: none;
            width: 100%;
            height: 100%;
            opacity: 0.5;
            filter: alpha(opacity=50);
            -moz-opacity: 0.5;
        }
    </style>
</head>
<body>
    <p class=”showbtn”>
        <a href=”javascript:void(0);”>显示遮罩层</a>
    </p>
    <div id=”bg”></div>
    <div class=”box” style=”display:none”>
        <h2>jQuery 学习交流
            <a href=”#” class=”close”>关闭</a>
        </h2>
        <div class=”list”>
            <ul>
                <li>我是稀饭</li>
                <li>我是稀饭</li>
                <li>我是稀饭</li>
            </ul>
        </div>
    </div>
    <script>
        $(function () {
            $(“.showbtn”).click(function () {
                $(“#bg”).css({
                    display: “block”,
                    height: $(document).height()
                });
                var $box = $(‘.box’);
                $box.css({
                    //设置弹出层距离左边的位置
                    left: ($(“body”).width() – $box.width()) / 2 – 20 + “px”,
                    //设置弹出层距离上面的位置
                    top: ($(window).height() – $box.height()) / 2 + $(window).scrollTop() + “px”,
                    display: “block”
                });
            });
            //点击关闭按钮的时候,遮罩层关闭
            $(“.close”).click(function () {
                $(“#bg,.box”).css(“display”, “none”);
            });
        });
    </script>
</body>
</html>
web前端开发html代码|前端开发工程师月薪|web前端开发免费工具
» 本文来自:前端开发者 » 《前端开发入门工具_div 、CSS 、 jQuery 实现遮罩》
» 本文链接地址:https://www.rokub.com/4028.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
64K

评论 抢沙发

评论前必须登录!