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

Question

我正在尝试为我的页面制作引导模式。但是，每当我尝试关闭该模式时，该模式都会调整我整个页面的大小。

这是我从我的页面上截取的 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>

Answer 1

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

感谢@Ryan Brackett 的回答： Fixed position div scrollable发帖

Answer 2

您面临的问题是：您的初始页面，没有打开模式，适合浏览器。不需要滚动条。但是当你打开模态框时，这个模态框不适合浏览器，滚动条显示占用了一些空间。当您关闭模式时，滚动条消失，一切恢复正常。 您可以创建一个始终适合窗口的模态框，如果它太大，则允许在模态框内使用滚动条。 或者您可以在滚动条出现时节省空间，这样您的元素页面就不会被移动。 您可以寻找更小的自定义滚动条 这取决于要求和口味；）