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

IT����

IT����

 

[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>  
posted @ 2017-03-29 11:38  weizhxa  阅读(357)  评论(0)  编辑  收藏  举报