JS创建页面蒙板的一些知识技巧总结
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蒙板。{蒙板出现后背后元素依然可以操作}
演示：
HTML代码<!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>
<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;border:1px solid
#00f;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 全部选择 提示：你可先修改部分代码，再按运行]
[Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]
(2)设置了background属性的不透明div蒙板(透明度100%)（颜色为黑色）。{背后元素不可见且不可操作}
演示：
HTML代码<!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>
<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;z-index:2;left:0;top:0;width:"+w+"px;height:"+h+"px;color:#fff'></div>");
div.appendChild(document.createTextNode("xxxxxxxxxxxxxxxxxxxx"));
document.body.appendChild(div); } //-->
</script>
</body>
</html>
[Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]
[Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]
(3)设置了background且设置蒙板半透明(50%)的div蒙板。{背后隐约元素可见但不可操作}
演示：
HTML代码<!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>
<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=50);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 全部选择 提示：你可先修改部分代码，再按运行]
[Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]
(4)设置了background且设置蒙板全透明(0%)的div蒙板。{背后元素可见但不可操作}
演示：
HTML代码<!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> <script
type="text/javascript"> <!-- function
pop(){ var h=document.documentElement.clientHeight; var
w=document.documentElement.clientWidth; var
iframe=document.createElement("<iframe
style='position:absolute;z-index:1;left:0;top:0;width:"+w+"px;filter:alpha(opacity=0);height:"+h+"px;'></iframe>");
document.body.appendChild(iframe); } //-->
</script>
</body>
</html>
[Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]
[Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]
(5)使用div生成的蒙板不能遮盖select，但能遮盖iframe。
演示：
HTML代码<!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 全部选择 提示：你可先修改部分代码，再按运行]
[Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]
(6)使用全透明的iframe生成蒙板。{可遮盖select：自动隐藏select}
演示：
HTML代码<!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">
<!-- function pop(){ var
h=document.documentElement.clientHeight; var
w=document.documentElement.clientWidth; var
iframe=document.createElement("<iframe
style='position:absolute;z-index:1;left:0;top:0;width:"+w+"px;filter:alpha(opacity=0);height:"+h+"px;'></iframe>");
document.body.appendChild(iframe); } //-->
</script>
</body>
</html>
[Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]
[Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]
(7)div+iframe遮盖局部select。
演示：
HTML代码<!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" /> <style
type="text/css"> *{margin:0px;padding:0px}
</style>
</head>
<body> <input
type="text" id="inbox"
style="height:20px;width:140px;line-height:20px;position:absolute;top:50px;left:50px"
value="点击我遮盖下面的输入框" onclick="pop()"
onblur="undoPop()" /> <br
/><select id=""
style="position:absolute;top:80px;left:50px"><option>aaaaaaaaaaaaaaaaaaaaaaaaaaaaa</option></select>
<script type="text/javascript">
<!-- function pop(){ var
el=document.getElementByIdx("inbox"); var
iframe=document.createElement("<iframe
style='position:absolute;z-index:1;left:50px;top:70px;overflow:auto;width:142px;height:122px;'
id='i1'></iframe>");
var div=document.createElement("<div id='d1'
style='position:absolute;visibility:visible;background:#ccc;z-index:2;left:50px;top:70px;width:140px;height:120px;border:1px
solid #666'></div>");
div.appendChild(document.createTextNode("xxxxxxxxxxx\nxxxxxxxxx"));
document.body.appendChild(div); document.body.appendChild(iframe);
} function undoPop(){
document.body.removeChild(document.getElementByIdx("d1"));
document.body.removeChild(document.getElementByIdx("i1")); }
//--> </script>
</body>
</html>
[Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]
[Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]
神鸟技术
