HTML 网页弹出的遮罩层

文章目录

    例如,点击页面中的一个按钮,弹出一个 form 框,让用户填写并提交信息。

    此时就需要一个遮罩层。

    HTML

    <div class="bg_mask">
    </div>
    

    CSS

    .bg_mask {
    	display: none;
    	position: fixed;
    	top: 0%;
    	left: 0%;
    	width: 100%;
    	height: 100%;
    	background-color: black;
    	z-index: 1001;
    	-moz-opacity: 0.95;
    	opacity: 0.95;
    	filter: alpha(opacity = 95);
    }
    

    更优雅的展现

    直接使用 jquery 的 show 来显示遮罩层,显得太突兀,缺乏过度的过程。

    加上从上至下的展示动画就好多了。

    $('.bg_mask').slideDown(1000);
    

    关于作者 🌱

    我是来自山东烟台的一名开发者,有感兴趣的话题,或者软件开发需求,欢迎加微信 zhongwei 聊聊,或者关注我的个人公众号“大象工具”, 查看更多联系方式