用戶界面對話窗口 - 如何在內容加載之前不顯示對話框？

Question

我一直在嘗試使用UI對話框窗口來顯示一個現有的窗體（帶有窗體而沒有佈局的頁面）。我不確定我是否以正確的方式做到了這一點，但它似乎很好地減少了一些不良行爲。這是現在的行爲：

1. 沒有conent選項的對話框（非常小的/空）
2. 大約半秒後的內容加載和窗口展開insantly（不妙視覺）
3. 即使窗口寬度在內容加載時展開，標題欄也不會調整爲新的寬度，而是保持非常小的寬度。雖然如果resizeable設置爲'true'，標題將會擴展。當加載隱藏div的內容時，它只是沒有響應寬度調整。

如何才能在內容加載到對話框之前不顯示對話框，以及在內容加載完成後如何強制將對話框標題調整爲寬度調整？

<A HREF="javascript:newItem('foo')">CREATE NEW FOO ITEM<A> 

<script type="text/javascript"> 
    newItem= function(type) { 
     $("#form_load").load(
      '/items/new', {item_type: type}).dialog({ 
       modal:true, 
       draggable: true, 
       resizable: false, 
       width:'auto', 
       height:'auto', 
       title: 'Some title', 
       position: [150, 150] 
      }); 
    }; 
</script> 

謝謝！

Answer 1

您將要在加載內容後調用對話框。 您可以使用$ .load的回調方法來做到這一點。

<script type="text/javascript"> 
    newItem = function(type) { 
     $("#form_load").hide().load(
      '/items/new', 
      {item_type: type}, 
      function (data) { 
       $(this).dialog({ 
        modal  : true, 
        draggable : true, 
        resizable : false, 
        width  : 'auto', 
        height : 'auto', 
        title  : 'Some title', 
        position : [100, 100] 
       }); 
      } 
     });    
    } 
</script> 

您可能還希望包含一個隱藏/顯示切換，以便在加載內容之前不會顯示#form_load容器。

見jQuery的$ .load文檔瀏覽：http://api.jquery.com/load/

UPDATE：新增.hide（），所以創建對話框，直到不顯示內容。