根据Bootstrap的Modal开发的提示框
2015-10-13 10:32
330 查看
代码:
也可以直接写html
显示结果:
Alert:
Confirm:
http://www.tuicool.com/articles/mMNrIr
(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
相关文章推荐
- bootstrap-switch.js,让checkbox美起来
- HTML/CSS(一)Bootstrap btn
- bootstrap-switch.js,让checkbox美起来
- Bootstrap 编码规范
- 关于Bootstrap 模态框的产生使用
- bootstrap 3 中表单元素的写法 ---- 重点是 input file 元素的
- bootstrap tooltip 显示提示信息
- ASP.NET MVC + Bootstrap + XML + WCF 封装短信验证服务(三)
- bootstrap之Click大事
- Bootstrap 备忘录
- Bootstrap 学习笔记
- bootstrap入门-做一个简单的页面
- ASP.NET MVC + Bootstrap + XML + WCF 封装短信验证服务(二)
- Bootstrap
- Bootstrap Notify简记
- bootstrap modal垂直居中
- bootstrap属性
- jfinalQ开发教程10-qiao.js:js工具和bootstrap封装
- 让IE6 IE7 IE8 IE9 IE10 IE11支持Bootstrap的解决方法
- bootstrap+jQuery.validate