模拟网页对话框

css 代码

公司有个项目中的一个功能需要频繁的用到打开窗口操作，window.open()和window.showModalDialog()方法均感觉有点不合适。无奈之举，只能自己用层模拟一个了。

首先要定义个用户锁屏的DIV层；样式如下：

css 代码

#screenDiv{
    width:100%;
    height:100%;
    background:#cccccc;
    position:absolute;
    left:0;rightright:0;top:0;
    filter:alpha(opacity=50);
    display:none;
}

 

再定义三个层，分别用于标题，关闭按钮，信息。对应的样式如下：

css 代码

#infoDiv {
    position:absolute;
    width:0px;
    height:0px;
    z-index:10;
    border:1px solid #000000;
    background-color: #FFFFFF;
    visibility: inherit;
    display:none;
}
#closeDiv {
    position:absolute;
    width:15px;
    height:15px;
    z-index:11;
    border-right:1px solid #000000;
    border-top:1px solid #000000;
    background-color: #FFFFFF;
    visibility: visible;
    display:none;
    overflow: hidden;
}
#titleDiv {
    position:absolute;
    width:0px;
    height:15px;
    z-index:11;
    border-left:1px solid #000000;
    border-top:1px solid #000000;
    background-color: #FFFFFF;
    visibility: visible;
    display:none;
    overflow: hidden;
    filter:progid:DXImageTransform.Microsoft.Gradient(gradientType=1,startColorStr=#2c7fac,endColorStr=#ffffff;
}

最后再增加相应的拖放事件即可。

js 代码

//拖放层事件
    var iDiffX=0;
    var iDiffY=0;
    function handleMouseDown(e){

        var titleDiv = document.getElementById("titleDiv");
        iDiffX = e.clientX-titleDiv.offsetLeft;
        iDiffY = e.clientY-titleDiv.offsetTop;

        document.body.onmousemove=function(){
            var infoDiv = document.getElementById("infoDiv");
            var closeDiv = document.getElementById("closeDiv");
            var titleDiv = document.getElementById("titleDiv");

            infoDiv.style.left = e.clientX-iDiffX;
            infoDiv.style.top = e.clientY-iDiffY;

            closeDiv.style.left = e.clientX+500-15-iDiffX;
            closeDiv.style.top = e.clientY-iDiffY;

            titleDiv.style.left = e.clientX-iDiffX;
            titleDiv.style.top = e.clientY-iDiffY;
        };
        document.body.onmouseup=function(){
            document.body.onmousemove=null;
            document.body.onmouseup=null;
        };
    }

 大家参考下。提提意见。