啥也不说，先上图，有图有真相：)

现在绝大多数网站都不用自带的警报和确认了，因为界面太生硬了。因此这个插件就这样产生了.

来看插件的实现代码吧：

(函数(){ $ .MsgBox={ Alert:函数(标题，消息){ generate html(' alert '，标题，消息)；btnOk()；//警报只是弹出消息，因此没必要用到回调函数回调BtNno()；}，确认：函数(title，msg，callback){ generate html(' confirm '，title，msg)；btnOk(回调);btnNo()；} } //生成Html var GenerateHtml=函数（类型、标题、消息){ var _ html=_ html=' div id=' MB _ box '/div div id=' MB _ con ' span id=' MB _ tit ' ' title '/span '；_ html=' a id=' MB _ ico ' x/adiv id=' MB _ msg ' ' msg '/div div id=' MB _ btnbox '；if(type==' alert '){ _ html=' input id=' MB _ BTN _ ok ' type=' button ' value='确定' /';} if(type==' confirm '){ _ html=' input id=' MB _ BTN _ ok ' type=' button ' value='确定' /';_ html='输入id=' MB _ BTN _否'类型='按钮'值='取消' /';} _ html='/div/div '；//必须先将_html添加到身体，再设置钢性铸铁样式$(“正文”).追加(_ html)；generate cs()；} //生成CSS var generatecs=function(){ $(' # MB _ box ').css({ width: '100% '、height: '100% '、zIndex: '99999 '、position: 'fixed '、filter: 'Alpha(不透明度=60 ')、backgroundColor: 'black '、top: '0 '、left: '0 '、opa city 3360 ' 0.6 ' })；$('#mb_con ').css({ zIndex: '999999 '，width: '400px '，position: 'fixed '，backgroundColor: 'White '，borderradius 3360 ' 15px ' })；$('#mb_tit ').css({ display: 'block '、fontSize: '14px '、color: '#444 '、padding: ' 10px 15px '、backgroundColor: '#DDD '、borderradius 3360 ' 15px 15px 0 ' 0 '、borderbottom : ' 3px solid # 009 bfe '、font weight 3360 ' bold ' })；$('#mb_msg ').CSS({ padd : ' 20px '，lineHeight: '20px '，borderBottom: '1px虚线#DDD '，字号： ' 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: '微软雅黑' });$('#mb_btnbox ').css({ margin: '15px 0 10px 0 '，text align : ' center ' })；$('#mb_btn_ok，#mb_btn_no ').css({ width: '85px '，height: '30px '，color: 'white '，边框： ' none ' })；$('#mb_btn_ok ').CSS({背景色： ' # 168 BBB ' })；$('#mb_btn_no ').css({ backgroundColor: 'gray '，左边距： ' 20px ' })；//右上角关闭按钮盘旋样式$('#mb_ico ').悬停(function () { $(this)).css({ backgroundColor: 'Red '，color : ' White ' })；}，function () { $(this).css({ backgroundColor: '#DDD '，color : ' black ' })；});var _ widht=文档。文档元素。客户端宽度；//屏幕宽var _ height=文档。文档元素。客户身高；//屏幕高var boxWidth=$('#mb_con ').宽度();var boxHeight=$('#mb_con ').高度();//让提示框居中$('#mb_con ').CSS({ top :(_ height-box height)/2 ' px '，left :(_ widht-box width)/2 ' px ' })；} //确定按钮事件var btnOk=函数（回调){ $('#mb_btn_ok ').单击(函数(){ $('#mb_box，#mb_con ').移除();if(类型为(回调)=' function '){ callback()；} });} //取消按钮事件var btnNo=function(){ $(' # MB _ BTN _否，#mb_ico ').单击(函数(){ $('#mb_box，#mb_con ').移除();});}})();

超文本标记语言代码结构如下，js里面拼接的不直观，给出如下：

Div id=' MB _ box '/Div Div id=' mb_con ' span id=' MB _ tit ' title/spana id=' MB _ ico ' x/a Div id=' MB _ msg ' msg/Div id=' MB _ BTN框'输入id=' MB _ BTN _ ok '类型=' button '值=' ok '/输入id=' MB _ BTN _ no '类型=' button '值=' cancel '/Div/Div MB _ box是一个覆盖整个页面的半透明遮罩层MB _ con是提示框mb_con不放在mb_box的原因是如果放在mb_box，设置mb_con的透明度会影响mb_con，使MB _ con透明。之前试过background-color:rgba()，可惜ie8及以下版本不支持。因此，mb_con取在外部，通过设置z-index将其设置在mb_box的顶部。

为了让插件好用，图片没有刻意使用，界面效果由css控制。使用时，只需引用一个js文件。Css样式在js中已经死了，可能不灵活，但是使用起来非常方便。如果对界面风格不满意，或者对网站的颜色风格不一致，只能自己修改。

因为弹出层(div)无法达到原来的提醒确认那样的页面阻断效果，只能通过回调函数来模拟。为此，后台数据操作只能通过回调函数和ajax来完成。

演示如下：

html xmlns=' http://www.w3.org/1999/XHTML' head title模拟警报和确认提示框/title/headbody输入id=' add' type=' button '值=' add'/输入id=' delete' type=' button '值=' delete '/输入id=' update' type=' button '值=' modify '/脚本src=' http 3360./js/jquery-1 . 4 . 1 . min . js ' type=' text/JavaScript '/script script src=' http :/js/jquery . simple . msgbox . js ' type=' text/JavaScript '/script script type=' text/JavaScript ' $(' # add ')。bind ('click '，function () {$)。msgbox.alert ('message '，'哈哈，添加成功！' );});//回调函数可以直接写方法函数(){} $ ('# delete ')。bind ('click '，function () {$)。msgbox.confirm('温馨提示')，删除后无法恢复。您确定要继续吗？Tips '，function () {alert('您实际上删除了它.');});});函数测试(){警报('您单击了确定并进行了更改')；}//还可以通过方法名测试$(“# update”)。bind ('click '，function () {$ .msgbox.confirm('温馨提示'，'确定要修改吗？测试)；});//当然可以不给回调函数，点击OK，什么都不做，只关闭弹出层//$ ('# update ')。bind ('click '，function () {$)。msgbox。确认('温馨提示'，'确定要修改吗？' );});/script/body/html代码不多，如有疑问，可以留言：)