對Bootstrap一層封裝
阿新 • • 發佈:2020-09-23
<div id="com-alert" class="modal" style="z-index:9999;display: none;" > <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>
$(function () { window.Modal = function () { var reg = new RegExp("\\[([^\\[\\]]*?)\\]", 'igm'); var alr = $("#com-alert"); var ahtml = alr.html(); var _tip = function (options, sec) { alr.html(ahtml); // 復原 alr.find('.ok').hide(); alr.find('.cancel').hide(); alr.find('.modal-content').width(500); _dialog(options, sec); return { on: function (callback) { } }; }; 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 () { return; }); } } }; }; 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({ width: 250, backdrop: 'static' }); } return { tip: _tip, alert: _alert, confirm: _confirm } }(); }); function showTip(msg, sec, callback){ if(!sec) { sec = 1000; } Modal.tip({ title:'提示', msg: msg }, sec); setTimeout(callback, sec); } /** * 顯示訊息 * @param msg */ function showMsg(msg, callback){ Modal.alert({ title:'提示', msg: msg, btnok: '確定' }).on(function (e) { if(callback){ callback(); } }); } /** * 模態對話方塊 * @param msg * @returns */ function showConfirm(msg,callback){ //var res = false; Modal.confirm( { title:'提示', msg: msg, }).on( function (e) { callback(); //res=true; }); //return res; }
呼叫:
//提示
showTip("haha", 1000, function() {});
showMsg("haha", function() {});
showConfirm("haha",function(){});
傳統的刪除操作:
var isDel = confirm("真的確定要刪除嗎?");
if (false == isDel) {
return;
}