弹出层锁定页面

在页面浮一个层出来，并锁定下面的内容不可选。

JS文件

view plain copy to clipboard print ?

1. function NeatDialog(sHTML, sTitle, bCancel) {   
2.     window.neatDialog = null;   
3.     this.elt = null;   
4.     if (document.createElement && document.getElementById) {   
5.         var dg = document.createElement("div");   
6.         dg.className = "neat-dialog";   
7.         if (sTitle) {   
8.             sHTML = "<div class=/"neat-dialog-title/">" + sTitle + (bCancel ? "<img src=/"x.gif/" alt=/"Cancel/" class=/"nd-cancel/" />" : "") + "</div>/n" + sHTML;   
9.         }   
10.         dg.innerHTML = sHTML;   
11.         var dbg = document.createElement("div");   
12.         dbg.id = "nd-bdg";   
13.         dbg.className = "neat-dialog-bg";   
14.         var dgc = document.createElement("div");   
15.         dgc.className = "neat-dialog-cont";   
16.         dgc.appendChild(dbg);   
17.         dgc.appendChild(dg);   
18.         if (document.body.offsetLeft > 0) {   
19.             dgc.style.marginLeft = document.body.offsetLeft + "px";   
20.         }   
21.         document.body.appendChild(dgc);   
22.         if (bCancel) {   
23.             document.getElementById("nd-cancel").onclick = function () {window.neatDialog.close();};   
24.         }   
25.         this.elt = dgc;   
26.         window.neatDialog = this;   
27.     }   
28. }  

function NeatDialog(sHTML, sTitle, bCancel) {     window.neatDialog = null;     this.elt = null;     if (document.createElement && document.getElementById) {         var dg = document.createElement("div");         dg.className = "neat-dialog";         if (sTitle) {             sHTML = "<div class=/"neat-dialog-title/">" + sTitle + (bCancel ? "<img src=/"x.gif/" alt=/"Cancel/" class=/"nd-cancel/" />" : "") + "</div>/n" + sHTML;         }         dg.innerHTML = sHTML;         var dbg = document.createElement("div");         dbg.id = "nd-bdg";         dbg.className = "neat-dialog-bg";         var dgc = document.createElement("div");         dgc.className = "neat-dialog-cont";         dgc.appendChild(dbg);         dgc.appendChild(dg);         if (document.body.offsetLeft > 0) {             dgc.style.marginLeft = document.body.offsetLeft + "px";         }         document.body.appendChild(dgc);         if (bCancel) {             document.getElementById("nd-cancel").onclick = function () {window.neatDialog.close();};         }         this.elt = dgc;         window.neatDialog = this;     } }



调用JS的方法

view plain copy to clipboard print ?

1. function openDialog()   
2. {   
3.   var sHTML = '<p>Are you sure you want to destroy the world?</p>'+   
4.   '<p><button οnclick="window.neatDialog.close()">YES!</button></p>';   
5.   new NeatDialog(sHTML, "NeatDialog!", false);   
6.  }  

function openDialog() {   var sHTML = '<p>Are you sure you want to destroy the world?</p>'+   '<p><button οnclick="window.neatDialog.close()">YES!</button></p>';   new NeatDialog(sHTML, "NeatDialog!", false); }

还有CSS

view plain copy to clipboard print ?

1. div.neat-dialog-cont {   
2. background:transparent none repeat scroll 0%;   
3. height:100%;   
4. left:0pt;   
5. position:absolute;   
6. top:0pt;   
7. width:100%;   
8. z-index:98;   
9. }   
10. div.neat-dialog-bg {   
11. background-color:#EEEEEE;   
12. height:100%;   
13. left:0pt;   
14. opacity:0.7;   
15. position:absolute;   
16. top:0pt;   
17. width:100%;   
18. z-index:-1;   
19. }   
20. div.neat-dialog {   
21. background-color:#FFFFFF;   
22. border:1px solid #444444;   
23. margin-left:auto;   
24. margin-right:auto;   
25. position:relative;   
26. top:25%;   
27. width:30%;   
28. z-index:99;   
29. }   
30. div.neat-dialog-title {   
31. border-bottom:1px solid #444444;   
32. font-size:0.8em;   
33. line-height:1.2em;   
34. margin:0pt;   
35. padding:0.1em 0.3em;   
36. position:relative;   
37. }  

div.neat-dialog-cont { background:transparent none repeat scroll 0%; height:100%; left:0pt; position:absolute; top:0pt; width:100%; z-index:98; } div.neat-dialog-bg { background-color:#EEEEEE; height:100%; left:0pt; opacity:0.7; position:absolute; top:0pt; width:100%; z-index:-1; } div.neat-dialog { background-color:#FFFFFF; border:1px solid #444444; margin-left:auto; margin-right:auto; position:relative; top:25%; width:30%; z-index:99; } div.neat-dialog-title { border-bottom:1px solid #444444; font-size:0.8em; line-height:1.2em; margin:0pt; padding:0.1em 0.3em; position:relative; }