js 自定义弹窗方法

最新推荐文章于 2023-09-27 08:50:07 发布

转载最新推荐文章于 2023-09-27 08:50:07 发布 · 359 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/nackman/archive/2013/01/19/js%e8%87%aa%e5%ae%9a%e4

　　突然觉得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     //鎖屏DIV
78     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);

转载于:https://www.cnblogs.com/nackman/archive/2013/01/19/js%e8%87%aa%e5%ae%9a%e4%b9%89%e5%bc%b9%e7%aa%97%e6%96%b9%e6%b3%95.html