jQuery UIオーバーレイ再現修正 "Auto" Dimensions

Question

以前は、背景を超える高さを持つポップアップダイアログに問題がありました。半透明のオーバーレイは途中で停止し、下のすべては黒です。私の友人は私のためにそれを修正した。彼は言った：

"私は幅と高さに900pxを使用しました.JavaScriptがダイアログを表示するために値が最終的に上書きされるので、修正を純粋にCSSで達成する方法はありません。ダイアログを開いたり作成したりすると、ページの大きさに対する背景のオーバーレイのサイズを変更することになります。これはindex.htmlのボーナス機能を参照してください。

残念ながら、幅と高さが 'auto'に設定されている場合、この修正は適用されません。

誰かが私を助けてくれますか？ありがとう。

$("<div class='popupDialog'>Loading...</div>") 
     .dialog({ 
      autoOpen: true, 
      closeOnEscape: true, 
      width: '900', 
      height: '900', 
      modal: true, 
      title: 'Bonus Features', 
      beforeClose: function(){ $(this).remove(); } 
     }).load(url, function() { 
      $(this).dialog("option", "position", ['center', 'center']); 
     }); 


     adjustJQueryDialogOverlay(); 
    } 

    $(window).resize(function() { 
     $(".ui-dialog-content").dialog("option", "position", ['center', 'center']); 
    }); 

Answer 1

function openDialog(url) { 
    $("<div class='popupDialog'>Loading...</div>") 
     .dialog({ 
      autoOpen: false, 
      closeOnEscape: true, 
      width: '900', 
      height: 'auto', 
      modal: true, 
      title: 'Bonus Features', 
     }).bind('dialogclose', function() { 
      jdialog.dialog('destroy'); 
     }).load(url, function() { 
      $(this).dialog("option", "position", ['center', 'center']).bind('dialogopen', function() { 
        adjustJQueryDialogOverlay(); 
       }); 
       $(this).dialog("open"); 
     }); 
} 

$(window).resize(function() { 
    $(".ui-dialog-content").dialog("option", "position", ['center', 'center']); 
});