代码:
(function ($) { $(function () { var Modal = function () { var htmlContent = "<div id="dvModalDialog" class="modal">" + "<div class="modal-dialog modal-sm">" + "<div class="modal-content">" + "<div class="modal-header">" + "<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>" + "<h5 class="modal-title"><i class="fa fa-exclamation-circle"></i> [Title]</h5>" + "</div>" + "<div class="modal-body small">" + "<p>[Message]</p>" + "</div>" + "<div class="modal-footer">" + " <button type="button" class="btn btn-primary ok" data-dismiss="modal">[BtnOk]</button>" + " <button type="button" class="btn btn-default cancel" data-dismiss="modal">[BtnCancel]</button>" + " </div>" + " </div> " + " </div> " + " </div>"; $("body").append(htmlContent); var reg = new RegExp("\[([^\[\]]*?)\]", 'igm'); var alr = $("#dvModalDialog"); var ahtml = alr.html(); var _alert = function (options) { alr.html(ahtml); // 复原 //alr.find('.ok').removeClass('btn-success').addClass('btn-primary'); alr.find('.cancel').hide(); _dialog(options); return { on: function (callback) { if (callback && callback instanceof Function) { alr.find('.ok').click(function () { callback(true) }); } } }; }; var _confirm = function (options) { alr.html(ahtml); // 复原 //alr.find('.ok').removeClass('btn-primary').addClass('btn-success'); alr.find('.cancel').show(); _dialog(options); return { on: function (callback) { if (callback && callback instanceof Function) { alr.find('.ok').click(function () { callback(true) }); //alr.find('.cancel').click(function () { callback(false) }); } } }; }; var _dialog = function (options) { var ops = { msg: "内容", title: "提示", btnok: "确定", btncl: "取消" }; $.extend(ops, options); var html = alr.html().replace(reg, function (node, key) { return { Title: ops.title, Message: ops.msg, BtnOk: ops.btnok, BtnCancel: ops.btncl }[key]; }); alr.html(html); alr.modal({ 500, backdrop: 'static' }); } return { alert: _alert, confirm: _confirm } }(); window.Alert = function (msg) { Modal.alert({ msg: msg }) return { on: function (callback) { if (callback && callback instanceof Function) { Modal.alert({ msg: msg }).on(callback); } } } } window.Confirm = function (msg) { Modal.confirm({ msg: msg }) return { on: function (callback) { if (callback && callback instanceof Function) { Modal.confirm({ msg: msg }).on(callback); } } } } }); //使用方法 //Alert("asdf").on(function () { alert("dddd");}) //Alert("aaaa"); //Confirm("你确定要删除吗?"); })(jQuery);
也可以直接写html
<!-- system modal start --> <div id="dvModalDialog" class="modal"> <div class="modal-dialog modal-sm"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button> <h5 class="modal-title"><i class="fa fa-exclamation-circle"></i> [Title]</h5> </div> <div class="modal-body small"> <p>[Message]</p> </div> <div class="modal-footer"> <button type="button" class="btn btn-primary ok" data-dismiss="modal">[BtnOk]</button> <button type="button" class="btn btn-default cancel" data-dismiss="modal">[BtnCancel]</button> </div> </div> </div> </div> <!-- system modal end -->
显示结果:
Alert:
Confirm:
http://www.tuicool.com/articles/mMNrIr