当前位置:首页 > 开发 > Web前端 > 前端 > 正文

页面全屏遮罩的实现 方式

发表于: 2015-07-19   作者:Rainbow702   来源:转载   浏览:
摘要: 之前做了一个页面,在点击了某个按钮之后,要求页面出现一个全屏遮罩,一开始使用了position:absolute来实现的。当时因为画面大小是固定的,不可以resize的,所以,没有发现问题。 最近用了同样的做法做了一个遮罩,但是画面是可以进行resize的,所以就发现了一个问题,当画面被reisze到浏览器出现了滚动条的时候,就发现,用absolute 的做法是有问题的。后来改成fixed定位就

之前做了一个页面,在点击了某个按钮之后,要求页面出现一个全屏遮罩,一开始使用了position:absolute来实现的。当时因为画面大小是固定的,不可以resize的,所以,没有发现问题。

最近用了同样的做法做了一个遮罩,但是画面是可以进行resize的,所以就发现了一个问题,当画面被reisze到浏览器出现了滚动条的时候,就发现,用absolute 的做法是有问题的。后来改成fixed定位就没有问题了。

以下为测试代码 ,有兴趣的童鞋可以试试看。

 

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Mask</title>
<style>
body {
    height: 1000px;
}
.mask1 {
	position: absolute;
	left: 0px;
	top: 0px;
	right: 0px;
	bottom: 0px;
	display: none;
	background: rgba(0, 0, 0, 0.4);
}

.mask2 {
	position: fixed;
	left: 0px;
	top: 0px;
	right: 0px;
	bottom: 0px;
	display: none;
	background: rgba(0, 0, 0, 0.4);
}
</style>
<script>
    document.onclick = function(e) {
        var id = e.srcElement.id;
        if(id != "mask1" && id != "mask2") {
            document.querySelector(".mask1").style.display = "none";
            document.querySelector(".mask2").style.display = "none";
        }
    };
    window.onload = function(){
        document.querySelector("#mask1").onclick = function(e) {
            document.querySelector(".mask1").style.display = "block";
        };
        document.querySelector("#mask2").onclick = function(e) {
            document.querySelector(".mask2").style.display = "block";
        };
    };
</script>
</head>
<body>
    <div class="divcss5">
        <button id="mask1" type="button">mask1</button>
        <button id="mask2" type="button">mask2</button>
    </div>
    <div class="mask1"></div>
    <div class="mask2"></div>
</body>
</html>

 

页面全屏遮罩的实现 方式

  • 0

    开心

    开心

  • 0

    板砖

    板砖

  • 0

    感动

    感动

  • 0

    有用

    有用

  • 0

    疑问

    疑问

  • 0

    难过

    难过

  • 0

    无聊

    无聊

  • 0

    震惊

    震惊

编辑推荐
最近在做书途网新手引导的时候,需要做在半遮罩层上开几个高亮的区域,左思右想,除了设置background
先上效果图(本人喜欢胡巴,背景用了胡巴),鼠标滑过页面,图片变暗,透明度为0.4,同时弹出登录窗口
先上效果图(本人喜欢胡巴,背景用了胡巴),鼠标滑过页面,图片变暗,透明度为0.4,同时弹出登录窗口
转自: http://www.jb51.net/article/34951.htm 面遮罩弹出框已经不是一个陌生的话题了,实现的方法
package com.gk; import android.app.Activity; import android.content.Intent; import android.os
FrameLayout:该布局container可以用来占有屏幕的某块区域来显示单一的对象,可以包含有多个widgets或
首先,实际上新的窗口并不是创建出来再弹出来,而是将原本隐藏的重新显示出来。 html结构如下: <
关键方法 paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC_IN)); 说明 canvas原有的
效果体验:http://hovertree.com/texiao/jquery/10.htm 本示例使用jquery插件方式,完整代码如下: &
页面遮罩弹出框是最常见的一种情况,今天用jQuery实现页面遮罩弹出框,主要用的技术有JQuery,css和
版权所有 IT知识库 CopyRight © 2009-2015 IT知识库 IT610.com , All Rights Reserved. 京ICP备09083238号