我正在尝试为我的页面制作一个bootstrap模式。但每当我尝试关闭该模态时,该模态将调整整个页面的大小。
这是我从我的页面中获取的gif:https://ibb.co/iN5Bep
另外,我用这个:http://www.java2s.com/Tutorials/HTML_CSS/Bootstrap_Example/Dialog/Launch_a_modal_dialog_from_a_link_button.htm作为我的模态
我是javascript和bootstrap的新手,我不知道该怎么做才能解决这个问题。请帮忙
编辑:我使用:
<a href="#myModal1" data-toggle="modal">+Add Data</a>
打开 :
<div class="bs-example">
<div id="myModal1" class="modal fade">
<div class="modal-dialog" style="width:70%!important;">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"
aria-hidden="true">×</button>
<h4 class="modal-title">Add Credentials Data</h4>
</div>
<div class="modal-body">
//contenthere
</div>
<div class="modal-footer">
<button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
关闭它我使用:
<button type="button" class="close" data-dismiss="modal"
aria-hidden="true">×</button>
要么
<button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
您面临的问题是:没有打开模态的初始页面适合浏览器。不需要滚动条。但是你打开模态,这个模态不适合浏览器,滚动条显示占用一些空间。关闭模态时,滚动条消失,一切恢复正常。您可以创建一个始终适合窗口的模态,如果模式太大,则允许在模态内部使用滚动条。或者您可以节省空间以防滚动条显示,因此您的元素页面不会被移动。你可以寻找一个较小的自定义滚动条它依赖于要求和口味;)
我通过固定body标签位置并在其下面添加一个新div来解决它。
所有感谢@Ryan Brackett回答:Fixed position div scrollable帖子