div层，实现模式窗口/模态窗口/模式对话框

来源：互联网发布：js 自定义对象方法编辑：程序博客网时间：2024/05/20 06:07

<html>
<head>
   <title>精简模式窗口</title>

   <style type="text/css">
/*层1的样式*/
.div1{
/*本层要实现覆盖模式窗口以外全部内容的半透明效果*/
background-color:#000000;/*背景色*/
position: absolute ;/*绝对定位，必选，使层绝对依照top,left的标准显示，否则将不能实现覆盖*/
top:0;/*层与页面顶部距离*/
left:0;/*层与左侧边距离*/
z-index:1;/*当发生重叠时的优先级，数大的会覆盖数较小的，没进行设置的均可视为小于0*/
display:none; /*层是否可见，初始化none不可见*/
filter:Alpha(opacity=30);/*过滤颜色，设置透明度（可见度）30，数越小越透明*/
}

/*层2的样式*/
.div2{
/*本层显示在最前端，其它控件均不可用*/
width:300px;/*显示宽度*/
height:200px;/*显示高度*/
position:absolute;/*绝对定位*/
z-index:2;/*优先级*/
display: none;/*是否显示*/
border:3px inset blue; /*边框：宽度，样式，颜色*/
background-color:#9999CC;/*背景色*/
}
/*当然你可以自定义添加或更改更多的样式都无所谓*/
   </style>

//关闭显示
function closeShow()
{
div1.style.display="none";
div2.style.display="none";
}
   </script>
</head>
<body bgcolor="#CCFF00" id="body">
     
     <input type="button" value="测试按钮" onClick="show()"/>

   <div id="div1" class="div1"></div>

<div id="div2" class="div2">
       
       <div id="div3" style="width:100%;height:20px; background-color:#0099FF" align="right">
               <label onClick="closeShow()" style="font-weight:bolder;cursor:hand">
                     关闭  
               </label>
        </div>
       <br>
          这个模式窗口很简单吧！就是这个意思，具体样式可以随意设置
    </div>
</body>
</html>

<!--

好累……呼～这些东西千篇一律，在网上不知道有多少，不过每个人都有不同的理解方式，一百个人用有一百种方式。我用最简化的方法，加上我个人的详细的理解～完成div模仿模式化窗口代码。希望对我和其他需要的人有更多的帮助！

以上代码特意加上各种注释符，已经测试，可直接复制粘贴至记事本，修改后缀名为html或htm即可运行！！！

注意：适合IE浏览器，若是其他浏览器没有event，需加一些特殊的处理，在此不多说明咯。

转载于：http://hi.baidu.com/slzs_zyt/blog/item/83d5710f1a170b2c6159f3eb.html
slzs....