如何调整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