自己编写jQuery插件之模拟alert和confirm.docx

啥也不说，先上图，有图有真相 :)?现在绝大多数网站都不用自带的alert和confirm了，因为界面太生硬了。因此这个插件就这样产生了...?来看插件的实现代码吧：(function () { $.MsgBox = { Alert: function (title, msg) { GenerateHtml(alert, title, msg); btnOk(); //alert只是弹出消息，因此没必要用到回调函数callback btnNo(); }, Confirm: function (title, msg, callback) { GenerateHtml(confirm, title, msg); btnOk(callback); btnNo(); } }//生成Htmlvar GenerateHtml = function (type, title, msg) {var _html = ; _html += div id=mb_box/divdiv id=mb_conspan id=mb_tit + title + /span; _html += a id=mb_icox/adiv id=mb_msg + msg + /divdiv 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 += input id=mb_btn_no type=button value=取消 /; } _html += /div/div;//必须先将_html添加到body，再设置Css样式 $(body).append(_html); GenerateCss(); }//生成Cssvar 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).