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

问题描述：

我有一个打开模式窗口的函数。第一次打开所有输入字段都是可编辑的。但是，如果模式窗口关闭，我尝试再次打开它，所有输入字段都不可编辑。他们没有被禁用，但我不能通过点击来关注他们。关闭模式对话框禁用输入字段

我怀疑它是与

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");

什么用达斗可以使用单引号而不是单引号？你需要将所有的''''改为'“' – mplungjan

试过了，但它没有工作，我认为它是这样写的，因为JavaScript内嵌在html –

答

使用模态之前，我有过这种类型的错误。在我的情况下，它是由我的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; 

}

我试图将所有单引号改为双引号但是问题仍然存在，第二个模态窗口中的输入字段仍然是不可编辑的。 –

您是否在上面的代码中注释了这一行：var $ frame = $（“”）;？。双引号用于封装用于id属性的单引号。 – TravellingSalesman

是的。也改变了这一点，但仍然存在相同的问题 –

答

这个环节解决了我的问题....

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

我添加删除对话框在此之前：

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

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

相关推荐