//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>