• 根据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({
                         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

  • 相关阅读:
    npm --save-dev 与 --save 的区别
    Vue 简单实例 购物车2
    Vue 简单实例 购物车1
    node.js富文本编辑器
    使用jquery操作session
    浏览器窗口之间传递数据
    批量修改文件编码格式
    具有动态效果的响应式设计
    Ajax请求全局配置
    html实体转换
  • 原文地址:https://www.cnblogs.com/hongdada/p/4873796.html
Copyright © 2020-2023  润新知