模拟网页对话框

css 代码

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

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

css 代码

1. #screenDiv{   
2.     width:100%;   
3.     height:100%;   
4.     background:#cccccc;   
5.     position:absolute;   
6.     left:0;rightright:0;top:0;   
7.     filter:alpha(opacity=50);   
8.     display:none;   
9. }  

 

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

css 代码

1. #infoDiv {   
2.     position:absolute;   
3.     width:0px;   
4.     height:0px;   
5.     z-index:10;   
6.     border:1px solid #000000;   
7.     background-color: #FFFFFF;   
8.     visibility: inherit;   
9.     display:none;   
10. }   
11. #closeDiv {   
12.     position:absolute;   
13.     width:15px;   
14.     height:15px;   
15.     z-index:11;   
16.     border-right:1px solid #000000;   
17.     border-top:1px solid #000000;   
18.     background-color: #FFFFFF;   
19.     visibility: visible;   
20.     display:none;   
21.     overflow: hidden;   
22. }   
23. #titleDiv {   
24.     position:absolute;   
25.     width:0px;   
26.     height:15px;   
27.     z-index:11;   
28.     border-left:1px solid #000000;   
29.     border-top:1px solid #000000;   
30.     background-color: #FFFFFF;   
31.     visibility: visible;   
32.     display:none;   
33.     overflow: hidden;   
34.     filter:progid:DXImageTransform.Microsoft.Gradient(gradientType=1,startColorStr=#2c7fac,endColorStr=#ffffff;   
35. }  

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

js 代码

1. //拖放层事件   
2.     var iDiffX=0;   
3.     var iDiffY=0;      
4.     function handleMouseDown(e){   
5.   
6.         var titleDiv = document.getElementById("titleDiv");   
7.         iDiffX = e.clientX-titleDiv.offsetLeft;   
8.         iDiffY = e.clientY-titleDiv.offsetTop;   
9.            
10.         document.body.οnmοusemοve=function(){   
11.             var infoDiv = document.getElementById("infoDiv");   
12.             var closeDiv = document.getElementById("closeDiv");   
13.             var titleDiv = document.getElementById("titleDiv");   
14.                
15.             infoDiv.style.left = e.clientX-iDiffX;   
16.             infoDiv.style.top = e.clientY-iDiffY;   
17.                
18.             closeDiv.style.left = e.clientX+500-15-iDiffX;   
19.             closeDiv.style.top = e.clientY-iDiffY;   
20.                
21.             titleDiv.style.left = e.clientX-iDiffX;   
22.             titleDiv.style.top = e.clientY-iDiffY;   
23.         };   
24.         document.body.οnmοuseup=function(){   
25.             document.body.οnmοusemοve=null;   
26.             document.body.οnmοuseup=null;   
27.         };   
28.     }  

 大家参考下。提提意见。