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

Question

I'm trying to make a bootstrap modal for my page.我正在尝试为我的页面制作引导模式。 But whenever I try to close that modal, that modal will resize my entire page.但是每当我尝试关闭该模式时，该模式将调整我的整个页面的大小。

here is the gif that I took from my page : https://ibb.co/iN5Bep这是我从页面中获取的 gif： https ://ibb.co/iN5Bep

also, I use this: http://www.java2s.com/Tutorials/HTML_CSS/Bootstrap_Example/Dialog/Launch_a_modal_dialog_from_a_link_button.htm as my modal另外，我使用这个： http ://www.java2s.com/Tutorials/HTML_CSS/Bootstrap_Example/Dialog/Launch_a_modal_dialog_from_a_link_button.htm 作为我的模态

I'm quite new with javascript and bootstrap, and I'm not really sure what to do to fix this.我对 javascript 和 bootstrap 很陌生，我不确定如何解决这个问题。 please help请帮忙

Edit : i use :编辑：我使用：

<a href="#myModal1" data-toggle="modal">+Add Data</a>

to open :打开：

  <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>

to close it i use :关闭它我使用：

 <button type="button" class="close" data-dismiss="modal"
                  aria-hidden="true">&times;</button>

or或者

 <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>

Answer 1

The problem you are facing is: your initial page, without the modal opened, fits in the browser.您面临的问题是：您的初始页面，没有打开模式，适合浏览器。 There is no need of scroll bar.不需要滚动条。 But then you open the modal, and this modal doesn´t fit in the browser, and the scroll bar shows up taking some space.但是当你打开模态框时，这个模态框不适合浏览器，并且滚动条显示占用了一些空间。 When you close the modal, the scroll bar disappears and everything is back to normal.当您关闭模式时，滚动条消失，一切恢复正常。 You can create a modal that always fits in the window, and allow a scroll bar inside the modal if it's too big.您可以创建一个始终适合窗口的模态，如果它太大，则允许在模态内使用滚动条。 Or you can save space in case the scroll bar shows up, so your elements page don't get moved around.或者您可以节省空间以防滚动条出现，这样您的元素页面就不会被移动。 You can look for a smaller custom scroll bar It dependes on requirements and tastes ;)您可以寻找更小的自定义滚动条这取决于要求和品味；）

Answer 2

i solved it by making the body tag position fixed and adding a new div below it.我通过固定 body 标签位置并在其下方添加一个新 div 来解决它。

all thanks to @Ryan Brackett answer from : Fixed position div scrollable post感谢@Ryan Brackett 的回答： Fixed position div scrollable post

Answer 3

Sorry for resuming this old question, but I had the same problem on a legacy project and didn't find the solutions fit my requirements.很抱歉再次提出这个老问题，但我在遗留项目中遇到了同样的问题，并且没有找到符合我要求的解决方案。

The problem is that Bootstrap adds a padding-right: 17px;问题是 Bootstrap 添加了一个padding-right: 17px; inline style to the <body> when the modal is shown, to make up for the disappearing scrollbar in browsers where said scrollbar takes up actual space in the viewport (eg in all browsers on Windows, for example).显示模式时<body>的内联样式，以弥补浏览器中滚动条消失的情况，其中所述滚动条占用视口中的实际空间（例如，在 Windows 上的所有浏览器中）。 But for some reason Bootstrap doesn't seem to take away that padding when the modal is hidden.但是由于某种原因，当模态隐藏时，Bootstrap 似乎并没有消除该填充。

I solved this via JavaScript by simply resetting the style property on the modal hidden event:我通过 JavaScript 通过简单地重置模式隐藏事件的样式属性解决了这个问题：

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

Might not be the cleanest of solutions but it did the job for me, without having to rethink the entire DOM.可能不是最干净的解决方案，但它为我完成了工作，而无需重新考虑整个 DOM。

I also think this might have been a problem with a particular Bootstrap release, so maybe it cloud have been solved in future updates.我还认为这可能是特定 Bootstrap 版本的问题，所以也许它的云已经在未来的更新中得到解决。 But in my case I didn't have time to update the version due to budget constraints.但就我而言，由于预算限制，我没有时间更新版本。

Hope this helps someone!希望这对某人有帮助！

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

问题描述

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