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

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

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

Answer 2

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

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

Answer 3

很抱歉再次提出这个老问题，但我在遗留项目中遇到了同样的问题，并且没有找到符合我要求的解决方案。

问题是 Bootstrap 添加了一个padding-right: 17px; 显示模式时<body>的内联样式，以弥补浏览器中滚动条消失的情况，其中所述滚动条占用视口中的实际空间（例如，在 Windows 上的所有浏览器中）。 但是由于某种原因，当模态隐藏时，Bootstrap 似乎并没有消除该填充。

我通过 JavaScript 通过简单地重置模式隐藏事件的样式属性解决了这个问题：

$("#myModal1").on("hidden.bs.modal", function () {
    $('body').css('padding-right', 0);
});

可能不是最干净的解决方案，但它为我完成了工作，而无需重新考虑整个 DOM。

我还认为这可能是特定 Bootstrap 版本的问题，所以也许它的云已经在未来的更新中得到解决。 但就我而言，由于预算限制，我没有时间更新版本。

希望这对某人有帮助！

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

问题描述

3 个解决方案

解决方案1
2 2018-09-14 11:12:12

解决方案2
2 已采纳 2018-09-16 05:04:03

解决方案3
0 2022-06-28 08:48:16

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

问题描述

3 个解决方案

解决方案1 2 2018-09-14 11:12:12

解决方案2 2 已采纳 2018-09-16 05:04:03

解决方案3 0 2022-06-28 08:48:16

解决方案1
2 2018-09-14 11:12:12

解决方案2
2 已采纳 2018-09-16 05:04:03

解决方案3
0 2022-06-28 08:48:16