突然觉得js 很有意思,由于工作需要,在同事小溪哥的帮助下实现了一个自定义弹窗的方法,在此留痕以供日后自勉.

　　尔若有需要并不嫌代码丑陋,那就欢迎借鉴使用,当然,若有大虾看不过去请批评指正,在此鄙人先谢过了^.^!

1 /** 2  * by nacky.long 3  * 创建自定义弹窗 4  * @param param 5  * 参数结构： 6  param = { 7             title:'提示', 8             tips:"没有任何提示信息！", 9             btnOk:'是',10             btnNo:'否',11             funcOk:function () {12             },13             funcNo:function () {14             }15         }16  */17 function createMessTipWin(param) {18 19     if (empty(param)) {20         param = {21             title:'友情提示',22             tips:"没有任何提示信息！",23             btnOk:'是',24             btnNo:'否',25             funcOk:function () {26             },27             funcNo:function () {28             }29         }30     }31 32     var tipWinObj = document.createElement("DIV");33     tipWinObj.id = uuid();34     tipWinObj.style.cssText = "position:fixed;z-index:9999;width:300px; height:auto; overflow:hidden;background-color:white; border:solid 1px #231234;padding-bottom:10px;";35     tipWinObj.style.top = '30%';36     tipWinObj.style.left = '40%';37 38     var topDiv = document.createElement("DIV");39     topDiv.style.cssText = "height;30px; line-height:30px; font-size:14px;background-color:#231234;color:white;";40 41     var titDiv = document.createElement("DIV");42     titDiv.style.cssText = "float:left; width:80%;margin-left:5px;";43     titDiv.innerHTML = param.title;44 45     var cross = document.createElement("DIV");46     cross.style.cssText = "float:right; cursor:pointer;margin-right:5px;";47     cross.innerHTML = 'X';48 49     var clearDiv = document.createElement("DIV");50     clearDiv.style.cssText = "clear:both";51 52     var contentDiv = document.createElement("DIV");53     contentDiv.style.cssText = "height:auto; overflow:hidden; line-height:24px;padding:0px 10px 10px;text-align:center;margin-top:10px;";54     contentDiv.innerHTML = param.tips;55 56     var okBtn = document.createElement("BUTTON");57     okBtn.style.cssText = "float:right; width:50px; margin-right:10px;cursor:pointer ";58     okBtn.innerHTML = param.btnOk;59 60     var noBtn = document.createElement("BUTTON");61     noBtn.style.cssText = "float:right; width:50px;cursor:pointer;margin-right: 10px;";62     noBtn.innerHTML = param.btnNo;63 64     topDiv.appendChild(titDiv);65     topDiv.appendChild(cross);66     topDiv.appendChild(clearDiv);67     tipWinObj.appendChild(topDiv);68     tipWinObj.appendChild(contentDiv);69 70     tipWinObj.appendChild(noBtn);71     tipWinObj.appendChild(okBtn);72 73     //获取当前页面的第一个body节点对象,74     var body = document.getElementsByTagName("BODY")[0];75     body.appendChild(tipWinObj);76 77     //鎖屏DIV78     var bgObj = document.createElement("DIV");79     bgObj.style.cssText = "position:fixed;z-index: 9997;top: 0px;left: 0px;background: #000000;filter: alpha(Opacity=30); -moz-opacity:0.30;opacity:0.30;";80     bgObj.style.width = '100%';81     bgObj.style.height = '120%';82     body.appendChild(bgObj);83 84     cross.onclick = function () {85         body.removeChild(tipWinObj);86         body.removeChild(bgObj);87     };88     okBtn.onclick = function () {89         param.funcOk();90         body.removeChild(tipWinObj);91         body.removeChild(bgObj);92     };93     noBtn.onclick = function () {94         param.funcNo();95         body.removeChild(tipWinObj);96         body.removeChild(bgObj);97     };98 }

当然，使用前要构造参数了，

       var param = {

            title:'提示',

            tips:"你点点试试！",

            btnOk:'是',

            btnNo:'否',

            funcOk:function () {

                alert('真2')

            },

            funcNo:function () {

                alert(2)

            }

        }

        createMessTipWin(param);