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

当fancybox2已经可见时，如何调整它的宽度

1 个答案: