Bootstrap 3 - 模态背景不会根据模态对话框的高度调整大小？

Question

我在一个模态中放了一个表单,当用户触发单选按钮时,我试图显示表单的一些隐藏字段.在我显示隐藏的字段后,模态自动重新缩放的高度,但模态背景的高度不能用作模式对话框.我该怎么办呢？

<!-- modal -->
<div class='modal fade' id='contact-modal' tabindex='-1' role='dialog' aria-labelledby='modal-label' aria-hidden='true' data-backdrop='static' data-keyboard='false'>
    <div class='modal-dialog'>
        <div class='modal-content'>

            <div class='modal-header'>
                <button type='button' class='close' data-dismiss='modal'>
                    <span aria-hidden='true'>&times;</span><span class='sr-only'>Close</span>
                </button>
                <h4 class='modal-title' id='modal-label'>??????</h4>
            </div>

            <div class='modal-body'>
                <form role='form'>
                    <div class='form-group'>
                        <label for='learning'>????</label>
                        <div class='btn-group' id='learning' data-toggle='buttons'>
                            <label class='btn btn-default'><input type='radio' />??</label>
                            <label class='btn btn-default'><input type='radio' />??</label>
                            <label class='btn btn-default'><input type='radio' />??</label>
                        </div>
                    </div>
                    <div class='form-group'>
                        <label for='lunch'>????</label>
                        <div class='btn-group' id='lunch' data-toggle='buttons'>
                            <label class='btn btn-default'><input type='radio' />???</label>
                            <label class='btn btn-default'><input type='radio' />????</label>
                            <label class='btn btn-default'><input type='radio' />????</label>
                        </div>
                    </div> 
                    <div class='form-group'>
                        <label for='sleep'>????</label>
                        <div class='btn-group' id='sleep' data-toggle='buttons'>
                            <label class='btn btn-default'><input type='radio' />??</label>
                            <label class='btn btn-default'><input type='radio' />??</label>
                            <label class='btn btn-default'><input type='radio' />??</label>
                        </div>
                    </div>  
                    <div class='form-group'>
                        <label for='eat-medicine'>????</label>
                        <div class='btn-group'  id='eat-medicine' data-toggle='buttons'>
                            <label class='btn btn-default active'><input type='radio' value='0' />?</label>
                            <label class='btn btn-default'><input type='radio' value='1' />?</label>
                        </div>
                        <div class='hide' id='take-time'>
                            <input type='text' class='form-control' placeholder='???????' />
                            <input type='text' class='form-control' placeholder='???????' />
                            <input type='text' class='form-control' placeholder='???????' />
                        </div>
                    </div> 
                    <div class='form-group'>
                        <label for='health'>????</label>
                        <div class='btn-group' id='health' data-toggle='buttons'>
                            <label class='btn btn-default active'><input type='radio' value='0' />??</label>
                            <label class='btn btn-default'><input type='radio' value='1' />??</label>
                        </div><br />
                        <div class='btn-group hide' id='symptom' data-toggle='buttons'>
                            <label class='btn btn-default'><input type='radio' value='cough' />??</label>
                            <label class='btn btn-default'><input type='radio' value='runny-nose' />???</label>
                            <label class='btn btn-default'><input type='radio' value='sneeze' />???</label>
                            <label class='btn btn-default'><input type='radio' value='fever' />??</label>
                            <label class='btn btn-default'><input type='radio' value='other' />??</label>
                        </div>
                        <div class='hide' id='cause'>
                            <input type='text' class='form-control' placeholder='??' />
                        </div>
                    </div><br />
                    <div class="form-group">
                        <label for='teacher-say'>???</label>
                        <textarea class="form-control" rows="7" id="teacher-say" placeholder="????..."></textarea>
                    </div>
                </form>
            </div>

            <div class='modal-footer'>
                <button type='button' class='btn btn-default' data-dismiss='modal'>??</button>
                <button type='button' class='btn btn-primary' data-dismiss='modal'>??</button>
            </div>

        </div>
    </div>
</div>

Answer 1

在模式中使用Bootstrap Tabs时,我遇到了类似的情况...标签窗格高度不同.这将导致.modal-backdrop不适应新加载的选项卡的高度.我这样修好了......

$('a.class').on("click", function(e){
    e.preventDefault();
    setTimeout( function () {
        $('.modal').data('bs.modal').handleUpdate();
    } , 80 );
});

我setTimeout之所以使用,是因为在调整.modal-back-drop高度之前我必须等待标签内容加载.我使用的标签不是引导标签,所以我无法使用shown.bs.tab事件类型.

你可以很容易地适应这个......

$('input[type="radio"]').change( function(e) {
    e.preventDefault();
    setTimeout( function () {
        $('.modal').data('bs.modal').handleUpdate();
    } , 80 );
});

这应该足以让你通过:-)