前端开发 CSS全屏遮罩效果

python 前端开发工具|前端开发教学视频百度云|团队开发前端页面流程

要点:
1、position:absolute;
left:0;
top:0;
right:0;
bottom:0;
这可以让容器实现全屏效果
2、阻止事件冒泡
容器mask与对话框dialog是父子关系,按事件冒泡机制,dialog的click会触发mask的click事件,所以
必须阻止事件冒泡。
兼容浏览器,有两种方式
if(event){//ff
event.stopPropagation();
}
else{//ie
window.event.cancelBubble = true;
}
3、event.target
也可以用
if(event.target==this){

}
用来检查触发事件的对象

另外注意背景透明不要使用opacity,因为这样会使子元素也会继承opacity,可以用rgba,但遗憾的是ie8不支持rgba。

html 代码

<!DOCTYPE html>
<html lang=”en”>
<head>
    <meta charset=”UTF-8″>
    <title>web前端开发后台怎么连接</title>
    <style type=”text/css”>
        * {
            margin: 0;
            padding: 0;
        }
        .mask {
            position: absolute;
            left: 0;
            top: 0;
            right: 0;
            bottom: 0;
            z-index: 100;
            background: rgba(180, 60, 0, .4);
            display: none;
        }
        .mask .dialog {
            margin: 200px auto;
            width: 350px;
            height: 150px;
            border: 1px solid #ccc;
            background: #fff;
            box-shadow: 0 0 5px #F97C0F;
            padding: 20px;
            text-align: center;
            background: #F97C0F;
        }
        .mask .dialog p {
            font-size: 35px;
            color: #fff;
        }
        .mask .dialog div input {
            outline: 0;
            background: #FBBA81;
            height: 50px;
            line-height: 50px;
            font-size: 25px;
            border: none;
            border-bottom: 1px solid #333;
            text-align: center;
        }
        a {
            color: #000;
            font-size: 18px;
        }
    </style>
    <script type=”text/javascript” src=”http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js”></script>
</head>
<body>
    <div class=”mask”>
        <div class=”dialog”>
            <p>☹</p>
            <div contenteditable=”true”>
                <input type=”text” name=”” value=”What do you want?”>
            </div>
        </div>
    </div>
    <a href=”#” id=”open”>Open Dialog</a>
    <script type=”text/javascript”>
        $(function () {
            $(“#open”).click(function (e) {
                $(“.mask”).show();
            });
            $(“.dialog”).click(function (e) {
                if (e) {//ff
                    e.stopPropagation();
                    console.log(“e”);
                }
                else {//ie
                    window.event.cancelBubble = true;
                }
            });
            $(“.mask”).click(function (e) {
                // if(e.target==this){
                // $(“.mask”).hide();
                // }
                $(“.mask”).hide();
            });
        });
    </script>
</body>
</html>

前端手机端开发|前端开发手机六位密码|前端开发手机默认字体

» 本文来自:前端开发者 » 《前端开发 CSS全屏遮罩效果》
» 本文链接地址:https://www.rokub.com/4950.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
64K

评论 抢沙发

评论前必须登录!