根据Bootstrap的Modal开发的提示框

代码：

(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

 

转载于:https://www.cnblogs.com/hongdada/p/4873796.html