原理是使用bootstrap的Modal插件实现。
一、在前端模板合适的地方，加入Modal展现div元素。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | <!-- 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
1 2 3 4 | <link rel="stylesheet" href="__TPL__/css/photoswipe.css"><script type="text/javascript" src="__PUBLIC__/js/jquery.min.js" ></script> <script src="__PUBLIC__/bootstrap/js/bootstrap.min.js"></script> |
三、在JS的comon层，加入重写语句。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 | //封装alert、confirm window.Modal = function () { var reg = new RegExp("\\[([^\\[\\]]*?)\\]", 'igm'); var alr = $("#ycf-alert"); 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); //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 } }(); |
四、在需要的地方调用。
1 2 3 4 5 6 7 8 | Modal.confirm( { msg: "商品已成功加入购物车\n是否去购物车查看？" }) .on( function (e) { if(e) location.href = cart_url; }); |