javascript的实现代码如下：
<script type="text/javascript" language="javascript">
function addshow(){
var s=document.getElementById("addmessage").style;
var bg=document.getElementById("bg").style;
if(s.display=="none"){
s.display="block";
bg.display="block";
document.getElementById("text1").value="";
}
}
</script>
<body>中，利用点击按钮“显示”来调用以上方法显示隐藏的层：
<body>
<div id="bg" style="display: none; z-index: 1000; top: 0pt; left: 0pt; position: fixed; height: 100%; width: 100%; opacity: 0.8; filter:alpha(opacity=50);background-color: rgb(0, 0, 0);">
</div>
<div>
<p>请输入字符串：<input type="text" id="txt1" /><input type="button" value="计算" _disibledevent=>
<input type="button" id="b" value="显示" _disibledevent=>
</div>
<div id="addmessage" style="display:none;width:400px;height:300px;background-color:blue;z-index:1001;position:fixed;left:50%;margin-top:50px;margin-left:-251px;" />
<h1>添加用户信息</h1>
<table>
<tr><td>name:</td><td><input type="text" id="text1" /></td></tr>
<tr><td>password:</td><td><input type="password" id="p1" /></td></tr>
<tr><td></td><td><input type="submit" id="s1" value="save" _disibledevent=>
</table>
</div>
</body>
id为bg的层是为了在显示addmessage的层时，同时也显示出来，半透明的覆盖原来的页面，使原页面若隐若现，但不可操作，同时可以看到当单击已显示出的层中的“save”按钮，调用closeshow()方法来隐藏层，该方法代码如下：
function closeshow(){
var s=document.getElementById("addmessage").style;
var bg=document.getElementById("bg").style;
if(s.display=="block"){
s.display="none";
bg.display="none";
}
}
下面再对以上代码中的style="display: none; z-index: 1000; top: 0pt; left: 0pt; position: fixed; height: 100%; width: 100%; opacity: 0.8; filter:alpha(opacity=50);background-color: rgb(0, 0, 0);"和style="display:none;width:400px;height:300px;background-color:blue;z-index:1001;position:fixed;left:50%;margin-top:50px;margin-left:-251px;"的一些属性进行简单说明
display--规定元素应该生成的框的类型，none不显示，block将显示为块级元素
z-index--可用于将在一个元素放置于另一元素之后，仅对定位有效，如position: fixed
position--规定元素定位类型； fixed生成绝对定位的元素，相对于浏览器窗口进行定位。元素的位置通过“left”，“top”，“right”以及“buttom”属性进行规定
opacity--用于设置透明度，在各类浏览器中各有不同的方法设置，在上面的代码中，主要是对FF和IE两种主流进行了设置，FF的设置方法是opacity: 0.8;IE的设置方法是 filter:alpha(opacity=50);同时写明两种设置方法就可以使其在FF和IE中兼容
还有其他的一些属性，都可以在网上进行搜索详细了解。
最新评论