【JQuery】可嵌套多层的弹出框对话框提示框Dialog插件

web前端常用的dialog插件。参考 弹出框插件。

前言

链接中的弹出框基本已经够用，样式简洁，插件小巧，使用便捷，支持多平台，支持移动端。

但是，这个插件无法多层嵌套。只能有一个弹出框。比如，点击登录按钮，弹出登录窗口后，登录成功的提示框就无法弹出来。

而本文就是在兼具插件所有功能后，更优化了无法多层嵌套的劣势及其他小问题。

代码

这里仅给出dialog的代码，至于图片及css请自行去那边下载。

css文件仅修改了一处。将css文件中的z-index:10000及z-index:10001删除即可。

var zIndex = 10000;
/**
 * dialog优化
 * Created by huantt on 2018/7/16.
 * https://blog.csdn.net/u010791662
 */

(function () {
    /**
     *
     * @param options
     * @constructor
     */
    function Dialog(options) {
        this.dialogWrapper;
        this.wrap;
        this.overlay;
        this.content;
        this.title;
        this.cancelBtn;
        this.okBtn;
        this.okBtnClose = options.okBtnClose == undefined ? false : options.okBtnClose;
        this.settings = $.extend({}, defaults, options);
        this.timer;
        this.contentBd;
        this.contentFt;
        // this.close;
        // this.update;
        zIndex += 5;
        this.init();
    }

    Dialog.prototype.init = function () {

        this._renderDOM();
        this._bindEvent();
    };
    Dialog.prototype._renderDOM = function () {
        var dialog = this;
        clearTimeout(dialog.timer);
        console.log(dialog.settings);
        dialog.settings.onBeforeShow();

        $('body').append(dialog.dialogWrapper = $('<div class="dialog-wrap ' + dialog.settings.dialogClass + '" style="zIndex:'
            + zIndex + '"></div>'));
        dialog.dialogWrapper.append(
            dialog.overlay = $('<div class="dialog-overlay" style="z-index:' + zIndex + '"></div>'),
            dialog.content = $('<div class="dialog-content" style="z-index:' + (zIndex + 1) + '"></div>')
        );

        switch (dialog.settings.type) {
            case 'alert' :
                if (dialog.settings.showTitle) {
                    dialog.content.append(
                        dialog.title = $('<div class="dialog-content-hd"><h4 class="dialog-content-title">' + dialog.settings.titleText + '</h4></div>')
                    );
                }
                dialog.content.append(
                    dialog.contentBd = $('<div class="dialog-content-bd">' + dialog.settings.contentHtml + '</div>')
                );
                dialog.content.append(
                    dialog.contentFt = $('<div class="dialog-content-ft"></div>')
                );
                contentFt.append(
                    dialog.okBtn = $('<a class="dialog-btn dialog-btn-ok ' + dialog.settings.buttonClass.ok + '" href="javascript:;">' + dialog.settings.buttonText.ok + '</a>')
                );
                break;

            case 'confirm' :
                if (dialog.settings.showTitle) {
                    dialog.content.append(
                        dialog.title = $('<div class="dialog-content-hd"><h4 class="dialog-content-title">' + dialog.settings.titleText + '</h4></div>')
                    );
                }
                dialog.content.append(
                    dialog.contentBd = $('<div class="dialog-content-bd">' + dialog.settings.contentHtml + '</div>')
                );
                dialog.content.append(
                    dialog.contentFt = $('<div class="dialog-content-ft"></div>')
                );
                dialog.contentFt.append(
                    dialog.cancelBtn = $('<a class="dialog-btn dialog-btn-cancel ' + dialog.settings.buttonClass.cancel + '" href="javascript:;">' + dialog.settings.buttonText.cancel + '</a>'),
                    dialog.okBtn = $('<a class="dialog-btn dialog-btn-ok ' + dialog.settings.buttonClass.ok + '" href="javascript:;">' + dialog.settings.buttonText.ok + '</a>')
                );
                break;

            case 'info' :
                var infoContent = dialog.settings.contentHtml || '<img class="info-icon" src="' + dialog.settings.infoIcon + '" alt="' + dialog.settings.infoText + '" /><p class="info-text">' + dialog.settings.infoText + '</p>';
                dialog.content.append(
                    dialog.contentBd = $('<div class="dialog-content-bd">' + infoContent + '</div>')
                );
                dialog.dialogWrapper.addClass('dialog-wrap-info');
                dialog.content.addClass('dialog-content-info');
                break;

            default :
                break;
        }

        setTimeout(function () {
            dialog.dialogWrapper.addClass('dialog-wrap-show');
            dialog.settings.onShow();
        }, 10);
    }

    Dialog.prototype._bindEvent = function () {
        var dialog = this;
        $(dialog.okBtn).on('click', function (e) {
            dialog.settings.onClickOk();
            if (dialog.okBtnClose)
                dialog.close();
            return false;
        });

        $(dialog.cancelBtn).on('click', function (e) {
            dialog.settings.onClickCancel();
            dialog.close();
            return false;
        });

        // overlay clisk hide
        if (dialog.settings.overlayClose) {
            dialog.overlay.on('click', function (e) {
                dialog.close();
            });
        }

        // auto close, set autoClose and type isn't info
        if (dialog.settings.autoClose > 0) {
            dialog._autoClose();
        }
    }

    Dialog.prototype._autoClose = function () {
        var dialog = this;
        clearTimeout(dialog.timer);
        dialog.timer = window.setTimeout(function () {
            dialog.close();
        }, dialog.settings.autoClose);
    }

    Dialog.prototype.close = function close() {
        var dialog = this;
        dialog.settings.onBeforeClosed();

        dialog.dialogWrapper.remove();
        setTimeout(function () {
            dialog.dialogWrapper.remove();
            dialog.settings.onClosed();
        }, 200);
    }

    Dialog.prototype.update = function update(params) {
        var dialog = this;
        if (params.infoText) {
            dialog.content.find('.info-text').html(params.infoText);
        }
        if (params.infoIcon) {
            dialog.content.find('.info-icon').attr('src', params.infoIcon);
        }
        if (params.autoClose > 0) {
            window.setTimeout(function () {
                dialog.close();
            }, params.autoClose);
        }
    }

    var defaults = {
        type: 'alert',     // alert、confirm、info
        titleText: '信息提示',
        showTitle: true,
        contentHtml: '',
        dialogClass: '',
        autoClose: 0,
        overlayClose: false,
        drag: false,
        buttonText: {
            ok: '确定',
            cancel: '取消',
            delete: '删除'
        },
        buttonClass: {
            ok: '',
            cancel: '',
            delete: ''
        },

        infoText: '',      // working in info type
        infoIcon: '',      // working in info type

        onClickOk: function () {
        },
        onClickCancel: function () {
        },
        onClickClose: function () {
        },

        onBeforeShow: function () {
        },
        onShow: function () {
        },
        onBeforeClosed: function () {
        },
        onClosed: function () {
        }
    };
    window.Dialog = Dialog;
    return this;
})();

/**
 * 状态框
 * @type {null}
 */
var initDialog = null;

/**
 * 成功框
 * @param time 显示时间，0为不自动关闭,空或者负数为默认
 */
function showSuccess(time) {
    if (time == null || time < 0)
        time == 5000;
    if (initDialog == null)
        initDialog = new Dialog({
            type: 'info',
            autoClose: time,
            infoText: '操作成功',
            infoIcon: 'img/icon/success.png'
        });
    else
        initDialog.update({
            autoClose: time,
            infoText: '操作成功',
            infoIcon: 'img/icon/success.png'
        });
}

/**
 * 失败框
 * @param time 显示时间，0为不自动关闭,空或者负数为默认
 */
function showFail(time) {
    if (initDialog == null)
        initDialog = new Dialog({
            type: 'info',
            autoClose: time,
            infoText: '操作失败，请联系管理员',
            infoIcon: 'img/icon/fail.png'
        });
    else
        initDialog.update({
            autoClose: time,
            infoText: '操作失败，请联系管理员',
            infoIcon: 'img/icon/fail.png'
        });
}

/**
 * 等待框
 * @param time 显示时间，0为不自动关闭,空或者负数为默认
 */
function showWait(time) {
    if (initDialog == null)
        initDialog = new Dialog({
            type: 'info',
            autoClose: time,
            infoText: '加载中…',
            infoIcon: 'img/icon/loading.gif'
        });
    else
        initDialog.update({
            autoClose: time,
            infoText: '加载中…',
            infoIcon: 'img/icon/loading.gif'
        });
}

调用：

与原调用方法相同。只是把 $.dialog 改成 new Dialog 即可。

新增了 okBtnClose 属性，该属性表示，点击确定，按钮执行完回调函数后是否自动关闭对话框。默认不关闭。可测试后，根据自己需求修改。

调用提示框

调用等待框，其他框调用方法相同：

showWait(0);

常规调用：

var infoDialog = new Dialog({
        showTitle: false,
        type: 'confirm',
        okBtnClose:true,
        buttonText: {
            ok: '确定',
            cancel: '取消'
        },
        onClickOk: function () {
        },
        onClickCancel: function () {
        },
        contentHtml: html
    });

    //infoDialog.close;