//JQuery部分
1 (function($) { 2 3 $.alerts = { 4 alert: function(title, message, callback) { 5 if( title == null ) title = \'Alert\'; 6 $.alerts._show(title, message, null, \'alert\', function(result) { 7 if( callback ) callback(result); 8 }); 9 }, 10 11 confirm: function(title, message, callback) { 12 if( title == null ) title = \'Confirm\'; 13 $.alerts._show(title, message, null, \'confirm\', function(result) { 14 if( callback ) callback(result); 15 }); 16 }, 17 18 19 _show: function(title, msg, value, type, callback) { 20 21 var _html = ""; 22 23 _html += \'<div id="mb_box"></div><div id="mb_con"><span id="mb_tit">\' + title + \'</span>\'; 24 _html += \'<div id="mb_msg">\' + msg + \'</div><div id="mb_btnbox">\'; 25 if (type == "alert") { 26 _html += \'<input id="mb_btn_ok" type="button" value="确定" />\'; 27 } 28 if (type == "confirm") { 29 _html += \'<input id="mb_btn_ok" type="button" value="确定" />\'; 30 _html += \'<input id="mb_btn_no" type="button" value="取消" />\'; 31 } 32 _html += \'</div></div>\'; 33 34 //必须先将_html添加到body，再设置Css样式 35 $("body").append(_html); GenerateCss(); 36 37 switch( type ) { 38 case \'alert\': 39 40 $("#mb_btn_ok").click( function() { 41 $.alerts._hide(); 42 callback(true); 43 }); 44 $("#mb_btn_ok").focus().keypress( function(e) { 45 if( e.keyCode == 13 || e.keyCode == 27 ) $("#mb_btn_ok").trigger(\'click\'); 46 }); 47 break; 48 case \'confirm\': 49 50 $("#mb_btn_ok").click( function() { 51 $.alerts._hide(); 52 if( callback ) callback(true); 53 }); 54 $("#mb_btn_no").click( function() { 55 $.alerts._hide(); 56 if( callback ) callback(false); 57 }); 58 $("#mb_btn_no").focus(); 59 $("#mb_btn_ok, #mb_btn_no").keypress( function(e) { 60 if( e.keyCode == 13 ) $("#mb_btn_ok").trigger(\'click\'); 61 if( e.keyCode == 27 ) $("#mb_btn_no").trigger(\'click\'); 62 }); 63 break; 64 65 66 } 67 }, 68 _hide: function() { 69 $("#mb_box,#mb_con").remove(); 70 } 71 } 72 // Shortuct functions 73 zdalert = function(title, message, callback) { 74 $.alerts.alert(title, message, callback); 75 } 76 77 zdconfirm = function(title, message, callback) { 78 $.alerts.confirm(title, message, callback); 79 }; 80 81 82 83 84 //生成Css 85 var GenerateCss = function () { 86 87 $("#mb_box").css({ width: \'100%\', height: \'100%\', zIndex: \'99999\', position: \'fixed\', 88 filter: \'Alpha(opacity=60)\', backgroundColor: \'black\', top: \'0\', left: \'0\', opacity: \'0.6\' 89 }); 90 91 $("#mb_con").css({ zIndex: \'999999\', width: \'50%\', position: \'fixed\', 92 backgroundColor: \'White\', borderRadius: \'15px\' 93 }); 94 95 $("#mb_tit").css({ display: \'block\', fontSize: \'14px\', color: \'#444\', padding: \'10px 15px\', 96 backgroundColor: \'#DDD\', borderRadius: \'15px 15px 0 0\', 97 borderBottom: \'3px solid #009BFE\', fontWeight: \'bold\' 98 }); 99 100 $("#mb_msg").css({ padding: \'20px\', lineHeight: \'20px\', 101 borderBottom: \'1px dashed #DDD\', fontSize: \'13px\' 102 }); 103 104 $("#mb_ico").css({ display: \'block\', position: \'absolute\', right: \'10px\', top: \'9px\', 105 border: \'1px solid Gray\', width: \'18px\', height: \'18px\', textAlign: \'center\', 106 lineHeight: \'16px\', cursor: \'pointer\', borderRadius: \'12px\', fontFamily: \'微软雅黑\' 107 }); 108 109 $("#mb_btnbox").css({ margin: \'15px 0 10px 0\', textAlign: \'center\' }); 110 $("#mb_btn_ok,#mb_btn_no").css({ width: \'85px\', height: \'30px\', color: \'white\', border: \'none\' }); 111 $("#mb_btn_ok").css({ backgroundColor: \'#168bbb\' }); 112 $("#mb_btn_no").css({ backgroundColor: \'gray\', marginLeft: \'20px\' }); 113 114 115 //右上角关闭按钮hover样式 116 $("#mb_ico").hover(function () { 117 $(this).css({ backgroundColor: \'Red\', color: \'White\' }); 118 }, function () { 119 $(this).css({ backgroundColor: \'#DDD\', color: \'black\' }); 120 }); 121 122 var _widht = document.documentElement.clientWidth; //屏幕宽 123 var _height = document.documentElement.clientHeight; //屏幕高 124 125 var boxWidth = $("#mb_con").width(); 126 var boxHeight = $("#mb_con").height(); 127 128 //让提示框居中 129 $("#mb_con").css({ top: (_height - boxHeight) / 2 + "px", left: (_widht - boxWidth) / 2 + "px" }); 130 } 131 132 133 })(jQuery);
html测试
1 <!doctype html> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title>模拟alert和confirm提示框</title> 6 </head> 7 <body> 8 <input id="add" type="button" value="添加" /> 9 <input id="update" type="button" value="修改" /> 10 11 <script src="wei-js/jquery-1.10.1.min.js" type="text/javascript"></script> 12 <script src="wei-js/myalert.js" type="text/javascript"></script> 13 <script type="text/javascript"> 14 15 $("#add").bind("click", function () { 16 // $.MsgBox.Alert("消息", "哈哈，添加成功！"); 17 18 zdalert(\'系统提示\',\'请输入正确数值\',function(){ 19 20 //要回调的方法 21 window.location.href="http://www.baidu.com"}); 22 23 }); 24 25 26 //也可以传方法名 test 27 $("#update").bind("click", function () { 28 29 30 // $.MsgBox.Confirm("温馨提示", "确定要进行修改吗？", test); 31 32 zdconfirm(\'系统确认框\',\'你确认提交该条数据吗\',function(r){ 33 if(r) 34 { 35 //...点确定之后执行的内容 36 37 window.location.href="http://www.baidu.com" 38 } 39 }); 40 41 42 }); 43 44 45 </script> 46 </body> 47 </html>