找回密码
当前位置：前端开发者 > 教程 > 正文

Web前端开发弹出层---遮罩效果的实现

2018-12-31 分类：教程 阅读(838) 评论(0)
h5前端开发是学什么
h5游戏开发和前端有什么区别
前端开发可以做什么的

html 代码片段

<!DOCTYPE html>
<html lang=”en”>
    <head>
        <meta charset=”UTF-8″ />
        <title>Mask</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>
前端js开发是什么意思
web前端开发有什么书推荐
找前端开发需要会什么软件
赞(1)
前端开发者 » Web前端开发弹出层---遮罩效果的实现
64K
标签：前端开发者

前端开发者

相关推荐

评论 抢沙发

评论前必须登录！

 

最新评论