Bootstrap 3 - 模态背景不根据模态对话框的高度调整大小？ [英] Bootstrap 3 - Modal backdrop doesn't resize according to the height of modal dialog?
问题描述
我把一个窗体内模态，我试图显示一些隐藏的字段的形式，当用户触发单选按钮。在我显示隐藏的字段之后，模态自动调整的高度，但模态的背景的高度不工作作为模态对话框。如何解决？
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'>×</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>
推荐答案
模态...选项卡窗格高度不同。这将导致.modal-backdrop不适应新加载的选项卡的高度。我固定了这样...
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 );
});
我使用 setTimeout 在调整 .modal-back-drop 高度之前加载选项卡内容。我使用的标签不是引导标签，所以我不能使用 shown.bs.tab 事件类型。
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 :-)
这篇关于Bootstrap 3 - 模态背景不根据模态对话框的高度调整大小？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
