如何做DIV模态窗口

 

 之前用DIV作一个模态窗口，觉得这样的效果还不错，某些时候，加载太多的JQuery，难免使得运行速度变慢。不使用JQuery，我们也可以用DIV来模拟模态窗口。如下图所示：

效果就差不多是这样了，示例文件用的黑色作为背景。虽然这样的模态窗口看起来比较简单，但还是比较实用的。

它的基本思想如下：

预先隐藏的一个DIV框架，这个DIV框架内可以没有任何内容，然后我们通过Javascript调用执行，让这个窗口显示，而且调用的时候通过参数为DIV设置必要内容。另外就是有一个铺满整个屏幕的大DIV层，这个层设置为半透明，z-index属性要比其他层高，比弹出框小。这样就可以保证用户只能操作弹出层。当用户不需要后即可点击确定按钮关闭，当然，你还可以在上面设置更多的按钮，可以自己定义样式，很方便。

在网上我看到有一些人设置的模态窗口，其基本思想和我这个差不多，但是有一个问题：就是当用户的页面很长的时候，那个半透明的遮罩层只显示整个屏幕那么大，当用户拖动滚动条的时候，下面部分就没办法遮住，使得用户可以任意操作。而且，弹出层也会随着滚动条上下滚动，不会始终居于屏幕某一位置。

这样就给用户造成了很多不变，使用这个模态窗口如同鸡肋，食之无味，弃之可惜。那么，有什么办法可以解决呢？

其实很简单，请看下面的代码：

显示内容的div

   .div_content
   {
            display:none;
            position: fixed;
            top: 50%;
            left: 50%;
            width: 480px;
            margin-left:-240px;
            height: 300px;
            margin-top:-150px;
            padding: 0;
            border: 12px solid #3777BC;
            background-color: #F0F5F8;
            _position:absolute;
            z-index:1011;
            overflow: hidden;
}

遮盖整个屏幕的div

.div_overlay
{
            display:none;
            position: fixed;
            top: 0%;
            left: 0%;
            width: 100%;
            height: 100%;
            background-color: black;
            z-index:1010;
            -moz-opacity: 0.8;
            opacity:.80;
            filter: alpha(opacity=80);
}

 

之前，为了解决这一问题，我使用javascript来控制，当弹出窗口时就检测一下当前浏览器可显示高度和整个滚动浏览的高度，即document.documentElement.clientHeight和document.body.offsetHeight，如果前者的高度小于后者，就说明当前有滚动条的出现。因此就设置遮罩层的高度为后者，否则显示前者，即100%。

但这一解决方法实在是错误，在某些页面可行，但另一些页面却完全行不通。检查了N遍都不行，而在另一些页面又行，这个令我颇为不解。后来想，这样的方法也许不太好，于是才想到，应该把position的属性改为：fixed。把遮罩层和弹出层的position属性都改为fixed，问题便完美解决，弹出框既不会随着滚动条随便滚动了，遮罩层也会布满整个屏幕，随时都如此。

其他需要扩展的，开发者完全可在弹出框里做改进，增加内容，增加按钮都没问题，现把源码提供出来，供大家学习交流：简单的DIV模态窗口.rar