首页 > 代码库 > js 重写 bootstrap 样式 alert/confirm 消息窗口
js 重写 bootstrap 样式 alert/confirm 消息窗口
相信很多人都受够了 alert、confirm 的样子，最近正在用 bootstrap 做项目，顺便封装了一个 bootstrap 样式的消息框。
实现起来很简单，bootstrap 本身就自带了 modal 模态框，样子还不错 ：）就把它封装一下用吧。
无码无真相，少说多做，上代码。
项目是Asp.net Mvc架构的，方便全局调用，我直接在全局 Layout 页面加上以下HTML：
<!-- system modal start --> <div id="ycf-alert" 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 -->
不多说了，都是bootstrap modal的样式，不熟悉的朋友可以查查 bootstrap css ，中括号[....]的内容会最终替换为我们传入的参数显示。
js 封装如下：
;$(function () { window.Modal = function () { var reg = new RegExp("\\[([^\\[\\]]*?)\\]", ‘igm‘); var alr = $("#ycf-alert"); var ahtml = alr.html(); //关闭时恢复 modal html 原样，供下次调用时 replace 用 //var _init = function () { // alr.on("hidden.bs.modal", function (e) { // $(this).html(ahtml); // }); //}(); /* html 复原不在 _init() 里面做了，重复调用时会有问题，直接在 _alert/_confirm 里面做 */ 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); console.log(alr); 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 } }();});
调用方法：
// 四个选项都是可选参数Modal.alert( { msg: ‘内容‘, title: ‘标题‘, btnok: ‘确定‘, btncl:‘取消‘ });// 如需增加回调函数，后面直接加 .on( function(e){} );// 点击“确定” e: true// 点击“取消” e: falseModal.confirm( { msg: "是否删除角色？" }) .on( function (e) { alert("返回结果：" + e); });
效果图：
还有一些细节需要完善，譬如blockUI等，晚了，先睡。
有空再补全。
js 重写 bootstrap 样式 alert/confirm 消息窗口
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。