jquery控件-实现自定义样式的弹出窗口和确认框（转）

Posted 2020-09-07 weizhxa

 

[javascript] view plain copy

 

1. (function () {  
2.     $.MsgBox = {  
3.         Alert: function (title, msg) {  
4.             Generatehtml("alert", title, msg);  
5.             btnOk();  //alert只是弹出消息，因此没必要用到回调函数callback  
6.             btnNo();  
7.         },  
8.         Confirm: function (title, msg, callback) {  
9.             GenerateHtml("confirm", title, msg);  
10.             btnOk(callback);  
11.             btnNo();  
12.         }  
13.     }  
14.     //生成Html  
15.     var GenerateHtml = function (type, title, msg) {  
16.         var _html = "";  
17.         _html += \'<div id="mb_box"></div><div id="mb_con"><span id="mb_tit">\' + title + \'</span>\';  
18.         _html += \'<a id="mb_ico">x</a><div id="mb_msg">\' + msg + \'</div><div id="mb_btnbox">\';  
19.         if (type == "alert") {  
20.             _html += \'<input id="mb_btn_ok" type="button" value="确定" />\';  
21.         }  
22.         if (type == "confirm") {  
23.             _html += \'<input id="mb_btn_ok" type="button" value="确定" />\';  
24.             _html += \'<input id="mb_btn_no" type="button" value="取消" />\';  
25.         }  
26.         _html += \'</div></div>\';  
27.         //必须先将_html添加到body，再设置Css样式  
28.         $("body").append(_html);   
29.         //生成Css  
30.          GenerateCss();  
31.     }  
32.   
33.     //生成Css  
34.     var GenerateCss = function () {  
35.         $("#mb_box").css({ width: \'100%\', height: \'100%\', zIndex: \'99999\', position: \'fixed\',  
36.             filter: \'Alpha(opacity=60)\', backgroundColor: \'black\', top: \'0\', left: \'0\', opacity: \'0.6\'  
37.         });  
38.         $("#mb_con").css({ zIndex: \'999999\', width: \'400px\', position: \'fixed\',  
39.             backgroundColor: \'White\', borderRadius: \'15px\'  
40.         });  
41.         $("#mb_tit").css({ display: \'block\', fontSize: \'14px\', color: \'#444\', padding: \'10px 15px\',  
42.             backgroundColor: \'#DDD\', borderRadius: \'15px 15px 0 0\',  
43.             borderBottom: \'3px solid #009BFE\', fontWeight: \'bold\'  
44.         });  
45.         $("#mb_msg").css({ padding: \'20px\', lineHeight: \'20px\',  
46.             borderBottom: \'1px dashed #DDD\', fontSize: \'13px\'  
47.         });  
48.         $("#mb_ico").css({ display: \'block\', position: \'absolute\', right: \'10px\', top: \'9px\',  
49.             border: \'1px solid Gray\', width: \'18px\', height: \'18px\', textAlign: \'center\',  
50.             lineHeight: \'16px\', cursor: \'pointer\', borderRadius: \'12px\', fontFamily: \'微软雅黑\'  
51.         });  
52.         $("#mb_btnbox").css({ margin: \'15px 0 10px 0\', textAlign: \'center\' });  
53.         $("#mb_btn_ok,#mb_btn_no").css({ width: \'85px\', height: \'30px\', color: \'white\', border: \'none\' });  
54.         $("#mb_btn_ok").css({ backgroundColor: \'#168bbb\' });  
55.         $("#mb_btn_no").css({ backgroundColor: \'gray\', marginLeft: \'20px\' });  
56.         //右上角关闭按钮hover样式  
57.         $("#mb_ico").hover(function () {  
58.             $(this).css({ backgroundColor: \'Red\', color: \'White\' });  
59.         }, function () {  
60.             $(this).css({ backgroundColor: \'#DDD\', color: \'black\' });  
61.         });  
62.         var _widht = document.documentElement.clientWidth;  //屏幕宽  
63.         var _height = document.documentElement.clientHeight; //屏幕高  
64.         var boxWidth = $("#mb_con").width();  
65.         var boxHeight = $("#mb_con").height();  
66.         //让提示框居中  
67.         $("#mb_con").css({ top: (_height - boxHeight) / 2 + "px", left: (_widht - boxWidth) / 2 + "px" });  
68.     }  
69.     //确定按钮事件  
70.     var btnOk = function (callback) {  
71.         $("#mb_btn_ok").click(function () {  
72.             $("#mb_box,#mb_con").remove();  
73.             if (typeof (callback) == \'function\') {  
74.                 callback();  
75.             }  
76.         });  
77.     }  
78.     //取消按钮事件  
79.     var btnNo = function () {  
80.         $("#mb_btn_no,#mb_ico").click(function () {  
81.             $("#mb_box,#mb_con").remove();  
82.         });  
83.     }  
84. })();  

Html代码结构如下，js里面拼接的不直观，给出如下：

 

 

[javascript] view plain copy

 

1. <div id="mb_box"></div>  
2. <div id="mb_con">  
3.         <span id="mb_tit">title</span><a id="mb_ico">x</a>  
4.         <div id="mb_msg">msg</div>  
5.         <div id="mb_btnbox">  
6.             <input id="mb_btn_ok" type="button" value="确定" />  
7.             <input id="mb_btn_no" type="button" value="取消" />  
8.         </div>  
9. </div>  

demo：

 

 

[javascript] view plain copy

 

1. <html xmlns="http://www.w3.org/1999/xhtml">  
2. <head>  
3.     <title>模拟alert和confirm提示框</title>  
4. </head>  
5. <body>  
6.     <input id="add" type="button" value="添加" />  
7.     <input id="delete" type="button" value="删除" />  
8.     <input id="update" type="button" value="修改" />  
9.     <script src="../js/jquery-1.4.1.min.js" type="text/javascript"></script>  
10.     <script src="../js/jquery.similar.msgbox.js" type="text/javascript"></script>  
11.     <script type="text/javascript">  
12.         $("#add").bind("click", function () {  
13.             $.MsgBox.Alert("消息", "哈哈，添加成功！");  
14.         });  
15.         //回调函数可以直接写方法function(){}  
16.         $("#delete").bind("click", function () {  
17.             $.MsgBox.Confirm("温馨提示", "执行删除后将无法恢复，确定继续吗？温馨提示", function () { alert("你居然真的删除了..."); });  
18.         });  
19.         function test() {  
20.             alert("你点击了确定,进行了修改");  
21.         }  
22.         //也可以传方法名 test  
23.         $("#update").bind("click", function () {  
24.             $.MsgBox.Confirm("温馨提示", "确定要进行修改吗？", test);  
25.         });  
26.         //当然你也可以不给回调函数,点击确定后什么也不做，只是关闭弹出层  
27. 　　　　 //$("#update").bind("click", function () { $.MsgBox.Confirm("温馨提示", "确定要进行修改吗？"); });  
28.     </script>  
29. </body>  
30. </html>