您的位置:首页 > Web前端 > BootStrap

根据Bootstrap的Modal开发的提示框

2015-10-13 10:32 330 查看
代码:

(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({
width: 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
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: