我正在使用Boostrap 3,我有一个模式显示一些
HTML内容,它有一个滚动条,因为所有内容都不适合视口.在这个模态中,有一个链接可以打开另一个模态.一切正常,第二个模态打开但是当我关闭它时,滚动条消失了,我无法在第一个模态上滚动(也不可能在鼠标上滚动滚轮).这是模态的代码：
<!-- First modal for creating voucher -->
<div class="modal fade" id="createVoucherModal" tabindex="-1" role="dialog" aria-labelledby="createVoucherModal" aria-hidden="true">
<div class="modal-dialog" style="width: 800px;">
<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">Zatvori</span></button>
<h4 class="modal-title">Izradi voucher</h4>
</div>
<div id="voucher-modal-body" class="modal-body" style="margin: 20px 40px 20px 40px;">
<!-- here goes dinamically created content (with jQuery) -->
</div>
<div class="modal-footer">
<a id="modal-create-pdf" href="" target="_blank"><button type="button" class="btn btn-primary" id="">Kreiraj PDF</button></a>
<button type="button" class="btn btn-default" data-dismiss="modal">Zatvori</button>
</div>
</div>
</div>
</div>
<!-- Second modal for editing note voucher -->
<div class="modal fade" id="editVoucherNoteModal" tabindex="-1" role="dialog" aria-labelledby="editVoucherNoteModal" aria-hidden="true">
<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">Zatvori</span></button>
<h4 class="modal-title">Uredi bilješke</h4>
</div>
<div id="voucher-modal-body" class="modal-body">
<textarea style="width: 100%; height: 100px;" id="voucher_note_input"></textarea>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary voucher_note_edit_button">Spremi</button>
<button type="button" class="btn btn-default" data-dismiss="modal">Zatvori</button>
</div>
</div>
</div>
</div>@H_404_3@
第一个模态的主体是空的,因为它是用jQuery动态生成的,但这里是打开第二个模态的链接
<a href="javascript:;" data-toggle="modal" data-target="#editVoucherNoteModal" id="voucher_note_edit" style="display: none;">Uredi</a>@H_404_3@
解决方法
我不耐烦所以我一直在努力,最后找到了一个有效的解决方案.我补充道
style="overflow-y: scroll;"@H_404_3@到第一个模态DIV元素,现在它看起来像这样：
<div class="modal fade" style="overflow-y: scroll;" id="createVoucherModal" tabindex="-1" role="dialog" aria-labelledby="createVoucherModal" aria-hidden="true"> <div class="modal-dialog" style="width: 800px;"> <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">Zatvori</span></button> <h4 class="modal-title">Izradi voucher</h4> </div> <div id="voucher-modal-body" class="modal-body" style="margin: 20px 40px 20px 40px;"> </div> <div class="modal-footer"> <a id="modal-create-pdf" href="" target="_blank"><button type="button" class="btn btn-primary" id="">Kreiraj PDF</button></a> <button type="button" class="btn btn-default" data-dismiss="modal">Zatvori</button> </div> </div> </div> </div>@H_404_3@它的工作原理！
