关闭Bootstrap模式将调整我的页面大小

问题描述 投票:0回答:2

我正在尝试为我的页面制作一个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">&times;</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">&times;</button>

要么

 <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
javascript css bootstrap-modal
2个回答
1
投票

您面临的问题是:没有打开模态的初始页面适合浏览器。不需要滚动条。但是你打开模态,这个模态不适合浏览器,滚动条显示占用一些空间。关闭模态时,滚动条消失,一切恢复正常。您可以创建一个始终适合窗口的模态,如果模式太大,则允许在模态内部使用滚动条。或者您可以节省空间以防滚动条显示,因此您的元素页面不会被移动。你可以寻找一个较小的自定义滚动条它依赖于要求和口味;)


0
投票

我通过固定body标签位置并在其下面添加一个新div来解决它。

所有感谢@Ryan Brackett回答:Fixed position div scrollable帖子

© www.soinside.com 2019 - 2024. All rights reserved.