關閉引導模式將調整我的頁面大小

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