モーダルダイアログを閉じて入力フィールドを無効にする

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

とは何かを持って疑ってい

はEDIT

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コードを見て、二重引用符（ ''）の代わりに2つの一重引用符（ ''）を使用して複数のエラーを見つけました。JSコードの2つの一重引用符をすべて一重引用符に変更してください。 。あなたのエラーを修正する必要があり

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; 

}