jQuery自定义弹出层插件(信息提示框、确认框)

/**

• jQuery自定义弹出层插件

• 使用方法：

• • 信息提示框：$.MsgBox.Alert('消息', '哈哈，添加成功！');
• • 确认框：$.MsgBox.Confirm('温馨提示', '确定要进行修改吗？', function(){ /* 点击确定按钮的回调函数 */ }); */ (function () { $.MsgBox = { Alert: function (title, msg, callback) { GenerateHtml('alert', title, msg); btnOk(callback); //alert只是弹出消息，因此没必要用到回调函数callback btnNo(); }, Confirm: function (title, msg, callback) { GenerateHtml('confirm', title, msg); btnOk(callback); btnNo(); } }

  //生成Html var GenerateHtml = function (type, title, msg) { var _html = ''; _html += '

  ' + title + ''; _html += 'x

  ' + msg + '

  '; if (type == 'alert') { _html += ''; } if (type == 'confirm') { _html += ''; _html += ''; } _html += '
  '; //必须先将_html添加到body，再设置Css样式 $('body').append(_html); //生成Css GenerateCss(); }

  //生成Css var GenerateCss = function () { $('#mb_box').css({ width: '100%', height: '100%', zIndex: '99999', position: 'fixed', filter: 'Alpha(opacity=60)', backgroundColor: 'black', top: '0', left: '0', opacity: '0.6' }); $('#mb_con').css({ zIndex: '999999', width: '400px', position: 'fixed', backgroundColor: 'White', borderRadius: '15px' }); $('#mb_tit').css({ display: 'block', fontSize: '14px', color: '#444', padding: '10px 15px', backgroundColor: '#DDD', borderRadius: '15px 15px 0 0', borderBottom: '3px solid #009BFE', fontWeight: 'bold' }); $('#mb_msg').css({ padding: '20px', lineHeight: '20px', borderBottom: '1px dashed #DDD', fontSize: '13px' }); $('#mb_ico').css({ display: 'block', position: 'absolute', right: '10px', top: '9px', border: '1px solid Gray', width: '18px', height: '18px', textAlign: 'center', lineHeight: '16px', cursor: 'pointer', borderRadius: '12px', fontFamily: '微软雅黑' }); $('#mb_btnbox').css({ margin: '15px 0 10px 0', textAlign: 'center' }); $('#mb_btn_ok,#mb_btn_no').css({ width: '85px', height: '30px', color: 'white', border: 'none' }); $('#mb_btn_ok').css({ backgroundColor: '#168bbb' }); $('#mb_btn_no').css({ backgroundColor: 'gray', marginLeft: '20px' }); //右上角关闭按钮hover样式 $('#mb_ico').hover(function () { $(this).css({ backgroundColor: 'Red', color: 'White' }); }, function () { $(this).css({ backgroundColor: '#DDD', color: 'black' }); }); var _widht = document.documentElement.clientWidth; //屏幕宽 var _height = document.documentElement.clientHeight; //屏幕高 var boxWidth = $('#mb_con').width(); var boxHeight = $('#mb_con').height(); //让提示框居中 $('#mb_con').css({ top: (_height - boxHeight) / 2 + 'px', left: (_widht - boxWidth) / 2 + 'px' }); } //确定按钮事件 var btnOk = function (callback) { $('#mb_btn_ok').click(function () { $('#mb_box,#mb_con').remove(); if (typeof (callback) == 'function') { callback(); } }); } //取消按钮事件 var btnNo = function () { $('#mb_btn_no,#mb_ico').click(function () { $('#mb_box,#mb_con').remove(); }); } })();