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代码，发现你使用两个单引号（＆＃39;＆＃39;）而不是双引号（＆＃34;）会出现多个错误。请将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");

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

2 个答案: