关闭模态对话框会禁用输入字段

Question

我有一个打开模式窗口的功能。第一次打开所有输入字段都是可编辑的。但是，如果模式窗口关闭并且我尝试再次打开它，则所有输入字段都不可编辑。它们没有被禁用，但我无法通过单击来专注于它们。

我怀疑这与它有关

var fns = {
        close: function() {
            opts.returnValue = $dialog.returnValue;
            $dialog = null;
            opts.onClose();
            if (opts.doPostBackAfterCloseCallback) {
                postBackForm(opts.postBackElementId);
            }
            $frame.remove();
        },
        adjustWidth: function() { $frame.css("width", "100%");
        }
    };

下面是完整代码

var $dialog = null;

jQuery.showModalDialog = function(options) {

    var defaultOptns = {
        url: null,
        dialogArguments: null,
        height: ''auto'',
        width: ''auto'',
        resizable: false,
        scrollable: true,
        onClose: function() { },
        returnValue: null,
        doPostBackAfterCloseCallback: false,
        postBackElementId: null
    };

    var fns = {
        close: function() {
            opts.returnValue = $dialog.returnValue;
            $dialog = null;
            opts.onClose();
            if (opts.doPostBackAfterCloseCallback) {
                postBackForm(opts.postBackElementId);
            }
            $frame.remove();
        },
        adjustWidth: function() { $frame.css("width", "100%");
        }
    };

    // build main options before element iteration

    var opts = $.extend({}, defaultOptns, options);

    var $frame = $(''<iframe id="iframeDialog" />'');

    if (opts.scrollable)
        $frame.css(''overflow'', ''auto'');

    $frame.css({
        ''top'' : 0,
        ''padding'': 0,
        ''margin'': 0,
        ''padding-bottom'': 0

    });

    var $dialogWindow = $frame.dialog({
        autoOpen: true,
        modal: true,
        width: opts.width,
        height: opts.height,
        resizable: opts.resizable,
        overlay: {
            opacity: 0.5,
            background: "black"
        },
        close: fns.close,
        resizeStop: fns.adjustWidth
    });

    $frame.attr(''src'', opts.url);
    fns.adjustWidth();

    $frame.load(function() {
        if ($dialogWindow) {

            var maxTitleLength = 50;
            var title = $(this).contents().find("title").html();            
            if (title.length > maxTitleLength) {
                title = title.substring(0, maxTitleLength) + ''...'';
            }
            $dialogWindow.dialog(''option'', ''title'', title);
        }
    });

    $dialog = new Object();
    $dialog.dialogArguments = opts.dialogArguments;
    $dialog.dialogWindow = $dialogWindow;
    $dialog.returnValue = null;

}

编辑：

似乎当我删除以下问题时，问题就消失了。但是这些元素并没有从 DOM 中移除

$frame.remove();

已解决

这个链接解决了我的问题

https://bugs.jqueryui.com/ticket/9122

我在删除对话框之前添加了这个：

$frame.attr("src", "about:blank");

Answer 1

我之前在使用模式时遇到过这种类型的错误。就我而言，这是由我的 javascript 中的错误引起的。我查看了您的 JS 代码，发现您使用两个单引号 (' ') 而不是双引号 (") 时出现多个错误。请将 JS 代码中所有出现的两个单引号更改为一个双引号。那应该解决你的错误。

    var $dialog = null;

    jQuery.showModalDialog = function(options) {

    var defaultOptns = {
        url: null,
        dialogArguments: null,
        height: "auto",
        width: "auto",
        resizable: false,
        scrollable: true,
        onClose: function() { },
        returnValue: null,
        doPostBackAfterCloseCallback: false,
        postBackElementId: null
    };

    var fns = {
        close: function() {
            opts.returnValue = $dialog.returnValue;
            $dialog = null;
            opts.onClose();
            if (opts.doPostBackAfterCloseCallback) {
                postBackForm(opts.postBackElementId);
            }
            $frame.remove();
        },
        adjustWidth: function() { 
            $frame.css("width", "100%");
        }
    };

    // build main options before element iteration

    var opts = $.extend({}, defaultOptns, options);

    var $frame = $("<iframe id='iframeDialog' />");

    if (opts.scrollable)
        $frame.css("overflow", "auto");

    $frame.css({
        "top" : 0,
        "padding": 0,
        "margin": 0,
        "padding-bottom": 0

    });

    var $dialogWindow = $frame.dialog({
        autoOpen: true,
        modal: true,
        width: opts.width,
        height: opts.height,
        resizable: opts.resizable,
        overlay: {
            opacity: 0.5,
            background: "black"
        },
        close: fns.close,
        resizeStop: fns.adjustWidth
    });

    $frame.attr("src", opts.url);
    fns.adjustWidth();

    $frame.load(function() {
        if ($dialogWindow) {

            var maxTitleLength = 50;
            var title = $(this).contents().find("title").html();            
            if (title.length > maxTitleLength) {
                title = title.substring(0, maxTitleLength) + "...";
            }
            $dialogWindow.dialog("option", "title", title);
        }
    });

    $dialog = new Object();
    $dialog.dialogArguments = opts.dialogArguments;
    $dialog.dialogWindow = $dialogWindow;
    $dialog.returnValue = null;

}

Answer 2

这个链接解决了我的问题....

https://bugs.jqueryui.com/ticket/9122

我在删除对话框之前添加了这个：

$frame.attr("src", "about:blank");