DOM 实现关机效果，提示内容框带圆角，兼容 Firefox和IE

我们在网站上经常看到一些仿windows的关机效果。

这种效果就是用一个悬浮的DIV把网整个网站挡住，使不能操作，并使用滤镜设计悬浮的DIV为透明

这样就只能看到网站网容而又不可操作，最后在透明层的上面再放一个DIV用来显示可以操作的内容。

把所有的下拉条设为不可见，以兼容IE6

取消效果的时候把创建的透明DIV和内容DIV从页面上删除，并且把下拉框重新显示出来。

下面用实便介绍实现过程：

1、创建透明的DIV

        //创建一个透明div
        var p = document.createElement("div"); 
        p.id = "p"; //设置id
        p.style.position = "absolute";  //设为绝对定位
        p.style.width = document.body.scrollWidth;  //设置div宽度为水平滚动条的宽度
        //设置高度为竖直滚动条高度
        p.style.height = (document.body.offsetHeight>document.body.scrollHeight)? '100%':document.body.scrollHeight;
        p.style.zIndex = '998'; //Z轴位置
        p.style.top = '0px';    //顶部边距
        p.style.left = '0%';    //在边距
        p.style.backgroundColor = "gray";   //背景色（灰）
        p.style.opacity = '0.5';    //不透明度
        p.style.filter = "alpha(opacity=30)";   //滤镜
        document.body.appendChild(p);   //把div添加到body

2、添加显示内容DIV：

        var p1 = document.createElement("div"); //创建内容div
        //计算顶部位置值
        var top = parseInt(parseInt(document.body.scrollHeight) * 0.25) + document.body.scrollTop;
        p1.style.position = "absolute";     //设为绝对定位
        p1.style.width = "300px";   //宽度
        p1.id = "p1";   //设置id
        //计算左边位置
        var left = Math.ceil(((document.body.scrollWidth)-parseInt(p1.style.width.replace('px','')))/2) + document.body.scrollLeft;
        p1.style.height = "200px";  //设计高度
        p1.style.zIndex = "999";    //Z轴位置
        p1.style.top = top + "px";  //设置顶部边距
        p1.style.left = left + "px";    //设置左边距
        p1.style.border = "0px solid red";  //边宽茺
        document.body.appendChild(p1);  //把div添加到body

3、显示内容的窗体（带圆角）

        var html = "";  //提示内容窗体
        html += "<center>"
        html+="<div class='div' style='width:294px;'></div>"
        html+="<div class='div' style='width:296px;'></div>"
        html+="<div class='div' style='width:298px;'></div>"
        html += "<div class='title' style='width:300px;'> ⊙ 提示</div>"
        html += "<div class='context' style='width:300px;'>欢迎来到JavaScript世界！"
                +"<br><br><br>[<a href='javascript:this.cancle()'>关闭</a> ]</div>"
        html+="<div class='div' style='background:#FEEACB;width:298px;'></div>"
        html+="<div class='div' style='background:#FEEACB;width:296px;'></div>"
        html+="<div class='div' style='width:294px;'></div>"
        html += "</center>"
        p1.innerHTML = html;    //把内容窗体添加到p1

4、设置所有下拉条控件为不可见：

        //所有的Select控件设为不可见
        var arr = document.getElementsByTagName("select");
        var i = 0;
        while (i < arr.length) {
            arr[i].style.visibility = "hidden";
            i++;
        }

5、清除效果：

        //清除关机效果
        this.cancle = function() {
            document.body.removeChild(document.getElementById("p"));
            document.body.removeChild(document.getElementById("p1"));
            var arr = document.getElementsByTagName("select");
            var i = 0;
            //把所有的select控件设为可见
            while (i < arr.length) {
                arr[i].style.visibility = "visible";
                i++;
            }
        }

6、使用的样式：

<style type="text/css">
    .div{height:1px;overflow:hidden;background:red;border-left:1px solid red;border-right:1px solid red;}
    .div2{height:1px;overflow:hidden;background:#FEEACB;border-left:1px solid red;border-right:1px solid red;}
    .title{height:20px;overflow:hidden;background:red;border-left:1px solid red;border-right:1px solid red;
           color:#fff;font-size:9pt;font-weight:bold;text-align:left;}
    .context{height:150px;overflow:hidden;background-color:#FEEACB;border-left:1px solid red;
             border-right:1px solid red;padding-top:40px;font-size:9pt;}
</style>

关机效果实例下载.rar