如何調整fancybox2的寬度當它已經可見

Question

我有一個用戶點擊一個按鈕時顯示的fancybox。

fancybox最初有1個下拉菜單，並根據用戶點擊的內容顯示不同的表單元素。問題是fancybox只有足夠寬的初始下拉列表，並且它只是在顯示錶單元素而不是調整大小時具有滾動條。

如何在這種情況下調整fancybox？

$(document).ready(function() { 

     $('#clickme').fancybox(); 

     $('#substrate').change(function() { 
      $this = $(this); 

      if($this.val() != 'select') { 


       if($this.val() == 'metal') { 
        console.log('$this = '+$this.val()); 
        $('#ribConf').show(); 
        $('#rust').show(); 
        $('#fancyform').show(); 
       } 

      } else { 
       $('#fancyform').hide(); 
      } 
     }); 

    }); 


<a id="clickme" href="#fancybox">click me</a> 

     <div id="fancybox" style="display:none;"> 

      <p> 
       <label for="substrate">Substrate</label> 
       <select id="substrate" name="substrate"> 
        <option value="select" selected="selected">-- Select --</option> 
        <option value="metal">Metal</option> 
        <option value="singleply">Single-Ply</option> 
        <option value="asphalt">Asphalt</option> 
       </select> 
      </p> 

      <form id="fancyform" style="display:none;"> 

       <p> 
        <label for="squareFeet">Square Feet</label> 
        <input type="text" name="squareFeet" /> 
       </p> 

       <p> 
        <label for="square">Square</label> 
        <input type="text" name="square" readonly="readonly"/> 
       </p> 

       <p id="ribConf" style="display:none;"> 
        <label for="ribConf">Rib Configuration</label> 
        <input type="text" name="ribConf" /> 
       </p> 

       <p id="rust" style="display:none;"> 
        <label for="rust">Rust</label> 
        <input type="text" name="rust" /> 
       </p> 

       <p id="waste" style="display:none;"> 
        <label for="waste">Waste</label> 
        <input type="text" name="waste" /> 
       </p> 

       <p><input id="submit" type="submit" value="Calculate"/></p> 

      </form> 
     </div> 

Answer 1

也許這會適合你。我將fancybox的大小設置爲強制高度和寬度的自動。看看這個測試fiddle。

.fancybox-inner{width:auto!important; height:auto!important;} 
.fancybox-outer{width:auto!important; height:auto!important;}​ 

你會發現有一個afterShow方法來模擬動態添加的內容

afterShow: function(){ 
     $('.fancybox-inner').append('<br/><br/><br/> testing stuff</br>') 
    } 

this is probably a better link to view it in action