javascript创建页面蒙板的一些知识技巧总结

2007-08-19 12:12:45 作者：

在ajax大行其道的今天，模拟弹出窗口，或者thinkbox，greybox等很多特效都用了蒙板的功能，其应用原来对于我们来说也很简单：创建一个绝对定位，top/left都为0，宽度和高度等于浏览器内容的高宽，然后索引设置的大点即可。可是这里有一些问题和技巧可能是您一直都不知道或者不清楚的，这里总结几点，这些都是个人学习的过程中发现的。

1、创建的蒙板如果要禁止对蒙板下部内容的操作必须设置background属性且必须设置一个有效的值，否则虽然遮罩层创建成功，但仍然可以对页面下部的元素进行操作。

2、如果要显示页面底部的元素可以通过css设置透明度来实现，如filter:alpha(opacity=0)，这里是完全透明，淡然也可以设置为半透明。

3、div层形成的蒙板可以蒙住iframe，但不能盖住select及object。

4、可以使用iframe可以遮盖select，一般使用iframe和div结合的办法遮盖select（div所以要比iframe的z索引高）并创建内容，其实iframe会自动隐藏select，也可以自己只使用div和js隐藏select。

5、对于使用js隐藏select的方法多数是在创建真正的蒙板时使用，如弹出框或thinkbox等。对于使用iframe和div的办法主要用于局部蒙板，如日期控件或title弹出时使用iframe和div定位在同一位置可以遮盖住其下的select控件。

以下为上面一些总结的演示：
(1)不设置background属性的div蒙板。{蒙板出现后背后元素依然可以操作}

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

(2)设置了background属性的不透明div蒙板(透明度100%)（颜色为黑色）。{背后元素不可见且不可操作}

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

(3)设置了background且设置蒙板半透明(50%)的div蒙板。{背后隐约元素可见但不可操作}

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

(4)设置了background且设置蒙板全透明(0%)的div蒙板。{背后元素可见但不可操作}

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

(5)使用div生成的蒙板不能遮盖select，但能遮盖iframe

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"  xml:lang="zh-CN" lang="zh-CN"> 
    <head> 
    <title></title> 
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
</head> 
<body> 
<input type="button" onclick="pop()" value="弹出遮罩层" /> 
<input type="text"  value="输入框" /> 
cccccccccccccccc 
<p>aaaaaaaaaaaa</p> 
<p>bbbbbbbbbbbbbbbb</p> 
<select id=""> 
<option>xxxxxxxxxxxxxx</option> 
</select> 
<iframe id="" src="http://www.baidu.com" width="100%" height="300"></iframe> 
<script type="text/javascript"> 
<!-- 
    function pop(){ 
        var h=document.documentElement.clientHeight; 
        var w=document.documentElement.clientWidth;

var div=document.createElement("<div style='position:absolute;visibility:visible;background:#000;filter:alpha(opacity=30);z-index:2;left:0;top:0;width:"+w+"px;height:"+h+"px;'></div>"); 
        div.appendChild(document.createTextNode("xxxxxxxxxxxxxxxxxxxx")); 
        document.body.appendChild(div); 
    } 
//--> 
</script> 
</body> 
</html>

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

(6)使用全透明的iframe生成蒙板。{可遮盖select：自动隐藏select}

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"  xml:lang="zh-CN" lang="zh-CN"> 
    <head> 
    <title></title> 
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
</head> 
<body> 
<input type="button" onclick="pop()" value="弹出遮罩层" /> 
<input type="text" value="输入框" /> 
cccccccccccccccc 
<p>aaaaaaaaaaaa</p> 
<p>bbbbbbbbbbbbbbbb</p> 
<select id=""> 
<option>xxxxxxxxxxxx</option> 
</select> 
<iframe id="" src="http://www.baidu.com" width="100%" height="300"></iframe> 
<script type="text/javascript"> 
 
</script> 
</body> 
</html>

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

(7)div+iframe遮盖局部select。

<select id="" style="position:absolute;top:80px;left:50px"><option>aaaaaaaaaaaaaaaaaaaaaaaaaaaaa</option></select> 
<script type="text/javascript"> 
 
</script> 
</body> 
</html>

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

javascript创建页面蒙板的一些知识技巧总结

您可能感兴趣的文章: