Bootstrap 3 - Modal backdrop doesn't resize ac

问题:

I put a form inside a modal and I trying to show some of the hidden fields of the form when users trigger the radio-button. After I show the hidden fields the height of the modal auto-rescale but the height of the modal's backdrop doesn't work as the modal dialog. How could I fix it?

<!-- 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>

回答1:

I had a similar situation when using Bootstrap Tabs within a modal... the tab pane heights were different. This would result in the .modal-backdrop not adapting to the height of a newly loaded tab. I fixed it like this...

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

I used setTimeout because I had to wait for the tab content to load before resizing the .modal-back-drop height. The tabs I was using weren't bootstrap tabs, so I couldn't use the shown.bs.tab event type.

You could easily adapt this to...

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

That should be enough to see you through :-)

回答2:

$('.modal-body').change(function(){
    setInterval(function(){ 
        $('.modal').modal('handleUpdate'); 
    }, 100);
});

回答3:

This problem was a bug in bootstrap and has been solved since version 3.3.5. Just upgrade your Bootstrap css and js file and it will work fine.

回答4:

Dirty hack:

setInterval(function(){

  if(!$("body").hasClass("modal-open")) return;

  var modalDialog = $(".modal.in > .modal-dialog");
  var backdrop = $(".modal.in > .modal-backdrop");
  var backdropHeight = backdrop.height();
  var modalDialogHeight = modalDialog.height();

  if(modalDialogHeight > backdropHeight) backdrop.height(modalDialogHeight+100);

}, 500)

回答5:

Simple code is, add <div style="clear:both"></div> before </form>

回答6:

Use <div class="clearfix"></div> Just above the form.

As,

<!-- 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>
<div class="clearfix"></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>