Bootstrap：在 Modal 中打開另一個 Modal

Question

所以，我使用這段代碼在當前打開的模式窗口中打開另一個模式窗口：

<a onclick=\"$('#login').modal('hide');$('#lost').modal('show');\" href='#'>Click</a>

發生的情況是，滾動條會在 500 毫秒內重復。 我猜是因為當前的模態仍在淡出。 然而，它看起來非常不流暢和口吃。

我將不勝感激任何解決此問題的建議。

另外，在點擊事件中構建這個的方式不專業嗎？

我正在使用引導程序 3.0 版。

編輯：我想有必要減少淡出模態的時間。 這怎么可能？

Answer 1

data-dismiss使當前模態窗口強制關閉

data-toggle打開一個新的模式，其中包含href內容

<a data-dismiss="modal" data-toggle="modal" href="#lost">Click</a>

或者

<a data-dismiss="modal" onclick="call the new div here">Click</a>

讓我們知道它是否有效。

• 您可能還想查看模態文檔

Answer 2

我的解決方案不會關閉較低的模式，而是真正堆疊在它之上。 它正確地保留了滾動行為。 在 Bootstrap 3 中測試。要使模態按預期堆疊，您需要在 Html 標記中將它們從最低到最高排序。

 $(document).on('hidden.bs.modal', function (event) { if ($('.modal:visible').length) { $('body').addClass('modal-open'); } });

更新：當您堆疊模態時，所有背景都顯示在最下方的模態下方。 您可以通過添加以下 CSS 來解決此問題：

.modal-backdrop {
    visibility: hidden !important;
}
.modal.in {
    background-color: rgba(0,0,0,0.5);
}

這將在最上面的可見模態下方給出模態背景的外觀。 這樣，它會使您的下部模態變灰。

Answer 3

Bootstrap 5（測試版）- 2021 年更新

modals 的默認 z-index 已更改為 1060。因此，要覆蓋 modals 和背景使用..

.modal:nth-of-type(even) {
    z-index: 1062 !important;
}
.modal-backdrop.show:nth-of-type(even) {
    z-index: 1061 !important;
}

Bootstrap 5 多模態

---

引導程序 4 - 2019 年更新

我發現大多數答案似乎都有很多不必要的jQuery。 只需使用 Bootstrap 提供的事件（例如show.bs.modal ）從另一個模態打開一個模態。 您可能還需要一些 CSS 來處理背景覆蓋。 這里有3個“多模態”場景......

從另一個模態打開模態（保持第一個模態打開）

<a data-toggle="modal" href="#myModal" class="btn btn-primary">Launch modal</a>

<div class="modal" id="myModal">
        <div class="modal-dialog">
          <div class="modal-content">
            <div class="modal-header">
              <h4 class="modal-title">Modal title</h4>    
              <button type="button" class="close" data-dismiss="modal">×</button>
            </div><div class="container"></div>
            <div class="modal-body">
              ...
              <a data-toggle="modal" href="#myModal2" class="btn btn-primary">Open modal2</a>
            </div>
            <div class="modal-footer">
              <a href="#" data-dismiss="modal" class="btn">Close</a>
            </div>
          </div>
        </div>
</div>
<div class="modal" id="myModal2" data-backdrop="static">
        <div class="modal-dialog">
          <div class="modal-content">
            <div class="modal-header">
              <h4 class="modal-title">2nd Modal title</h4>
              <button type="button" class="close" data-dismiss="modal">×</button>
            </div><div class="container"></div>
            <div class="modal-body">
              ..
            </div>
            <div class="modal-footer">
              <a href="#" data-dismiss="modal" class="btn">Close</a>
              <a href="#" class="btn btn-primary">Save changes</a>
            </div>
          </div>
        </div>
</div>

在這種情況下，一個潛在的問題是第二個模態的背景隱藏了第一個模態。 為了防止這種情況，制作第二個模態data-backdrop="static" ，並添加一些 CSS 來修復背景的 z-index ...

/* modal backdrop fix */
.modal:nth-of-type(even) {
    z-index: 1052 !important;
}
.modal-backdrop.show:nth-of-type(even) {
    z-index: 1051 !important;
}

https://codeply.com/go/NiFzSCukVl

---

從另一個模態打開模態（關閉第一個模態）

這與上述情況類似，但由於我們在打開第二個模態時關閉了第一個模態，因此不需要背景 CSS 修復。 一個處理第二個模態的簡單函數show.bs.modal事件關閉第一個模態。

$("#myModal2").on('show.bs.modal', function (e) {
    $("#myModal1").modal("hide");
});

https://codeply.com/go/ejaUJ4YANz

---

在另一個模態中打開模態

最后一個多模態場景是在第一個模態中打開第二個模態。 在這種情況下，第 2 個的標記放在第 1 個內部。 不需要額外的 CSS 或 jQuery。

<div class="modal" id="myModal1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title">Modal title</h4>
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
            </div>
            <div class="container"></div>
            <div class="modal-body">
                ...
                <a data-toggle="modal" href="#myModal2" class="btn btn-primary">Launch modal 2</a>
            </div>
            <div class="modal-footer">
                <a href="#" data-dismiss="modal" class="btn">Close</a>
            </div>
        </div>
    </div>

    <div class="modal" id="myModal2">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title">2nd Modal title</h4>
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                </div>
                <div class="container"></div>
                <div class="modal-body">
                    ...
                </div>
                <div class="modal-footer">
                    <a href="#" data-dismiss="modal" class="btn">Close</a>
                    <a href="#" class="btn btn-primary">Save changes</a>
                </div>
            </div>
        </div>
    </div>
</div>

https://codeply.com/go/iSbjqubiyn

Answer 4

要在當前打開的模態窗口中打開另一個模態窗口，
你可以使用引導模式

引導模式演示

Answer 5

嘗試這個

 <!DOCTYPE html> <html lang="en"> <head> <title></title> <meta charset="utf-8"> <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> </head> <body> <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#test1">Open Modal 1 </button> <div id="test1" class="modal fade" role="dialog" style="z-index: 1400;"> <div class="modal-dialog"> <!-- Modal content--> <div class="modal-content"> <div class="modal-body"> <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#test2">Open Modal 2</button> </div> </div> </div> </div> <div id="test2" class="modal fade" role="dialog" style="z-index: 1600;"> <div class="modal-dialog"> <!-- Modal content--> <div class="modal-content"> <div class="modal-body"> content </div> </div> </div> </div> </body> </html>

Answer 6

您實際上可以通過調用hidden.bs.modal事件來檢測舊模式何時關閉：

    $('.yourButton').click(function(e){
        e.preventDefault();

        $('#yourFirstModal')
            .modal('hide')
            .on('hidden.bs.modal', function (e) {
                $('#yourSecondModal').modal('show');

                $(this).off('hidden.bs.modal'); // Remove the 'on' event binding
            });

    });

欲了解更多信息：http: //getbootstrap.com/javascript/#modals-events

Answer 7

模態中的模態：

 $('.modal-child').on('show.bs.modal', function () { var modalParent = $(this).attr('data-modal-parent'); $(modalParent).css('opacity', 0); }); $('.modal-child').on('hidden.bs.modal', function () { var modalParent = $(this).attr('data-modal-parent'); $(modalParent).css('opacity', 1); });

 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <a href="#myModal" role="button" class="btn btn-primary" data-toggle="modal">Modals in Modal</a> <div id="myModal" class="modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-dialog"> <!-- Modal content--> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal">&times;</button> <h4 class="modal-title">Modal Header</h4> </div> <div class="modal-body"> <a href="#myModal1" role="button" class="btn btn-primary" data-toggle="modal">Launch other modal 1</a> <a href="#myModal2" role="button" class="btn btn-primary" data-toggle="modal">Launch other modal 2</a> </div> </div> </div> </div> <div id="myModal1" class="modal modal-child" data-backdrop-limit="1" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" data-modal-parent="#myModal"> <div class="modal-dialog"> <!-- Modal content--> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal">&times;</button> <h4 class="modal-title">Modal Header 1</h4> </div> <div class="modal-body"> <p>Two modal body…1</p> </div> <div class="modal-footer"> <button class="btn btn-default" data-dismiss="modal" data-dismiss="modal" aria-hidden="true">Cancel</button> </div> </div> </div> </div> <div id="myModal2" class="modal modal-child" data-backdrop-limit="1" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" data-modal-parent="#myModal"> <div class="modal-dialog"> <!-- Modal content--> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal">&times;</button> <h4 class="modal-title">Modal Header 2</h4> </div> <div class="modal-body"> <p>Modal body…2</p> </div> <div class="modal-footer"> <button class="btn btn-default" data-dismiss="modal" data-dismiss="modal" aria-hidden="true">Cancel</button> </div> </div> </div> </div>

Answer 8

在一個項目中工作，該項目有很多調用其他模式的模式和一些可能不知道每次為每個按鈕啟動它的 HTML 人員。 得出了與@gmaggio 相似的結論，但在先走了很長一段路之后不情願。

編輯：現在支持通過 javascript 調用的模式。

編輯：現在可以從另一個模式打開滾動模式。

$(document).on('show.bs.modal', function (event) {
    if (!event.relatedTarget) {
        $('.modal').not(event.target).modal('hide');
    };
    if ($(event.relatedTarget).parents('.modal').length > 0) {
        $(event.relatedTarget).parents('.modal').modal('hide');
    };
});

$(document).on('shown.bs.modal', function (event) {
    if ($('body').hasClass('modal-open') == false) {
        $('body').addClass('modal-open');
    };
});

只需將模態調用按鈕正常放入，如果將其拾取到模態內部，它將先關閉當前的，然后再打開 data-target 中指定的那個。 請注意， relatedTarget由 Bootstrap 提供。

我還添加了以下內容以稍微消除褪色：我相信可以做更多的事情。

.modal-backdrop.fade + .modal-backdrop.fade {
    transition: opacity 0.40s linear 0s;
}

Answer 9

Twitter 文檔說需要自定義代碼...

這無需額外的 JavaScript 即可工作，但強烈建議使用自定義 CSS...

 <link href="http://netdna.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="//netdna.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> <!-- Button trigger modal --> <button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#modalOneModal"> Launch demo modal </button> <!-- Modal --> <div class="modal fade bg-info" id="modalOneModal" tabindex="-1" role="dialog" aria-labelledby="modalOneLabel" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content bg-info"> <div class="modal-header btn-info"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> <h4 class="modal-title" id="modalOneLabel">modalOne</h4> </div> <div id="thismodalOne" class="modal-body bg-info"> <!-- Button trigger modal --> <button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#twoModalsExample"> Launch demo modal </button> <div class="modal fade bg-info" id="twoModalsExample" style="overflow:auto" tabindex="-1" role="dialog" aria-hidden="true"> <h3>EXAMPLE</h3> </div> </div> <div class="modal-footer btn-info" id="woModalFoot"> <button type="button" class="btn btn-info" data-dismiss="modal">Close</button> </div> </div> </div> </div> <!-- End Form Modals -->

Answer 10

對於引導程序 4，為了擴展 @helloroy 的答案，我使用了以下內容；-

var modal_lv = 0 ;
$('body').on('shown.bs.modal', function(e) {
    if ( modal_lv > 0 )
    {
        $('.modal-backdrop:last').css('zIndex',1050+modal_lv) ;
        $(e.target).css('zIndex',1051+modal_lv) ;
    }
    modal_lv++ ;
}).on('hidden.bs.modal', function() {
    if ( modal_lv > 0 )
        modal_lv-- ;
});

上面的好處是只有一個模態時它不會有任何效果，它只會在多個模態中起作用。 其次，它將處理委托給主體，以確保當前未生成的未來模態仍然得到滿足。

更新

轉向 js/css 組合解決方案改進了外觀 - 淡入淡出動畫繼續在背景上工作；-

var modal_lv = 0 ;
$('body').on('show.bs.modal', function(e) {
    if ( modal_lv > 0 )
        $(e.target).css('zIndex',1051+modal_lv) ;
    modal_lv++ ;
}).on('hidden.bs.modal', function() {
    if ( modal_lv > 0 )
        modal_lv-- ;
});

結合以下CSS；-

.modal-backdrop ~ .modal-backdrop
{
    z-index : 1051 ;
}
.modal-backdrop ~ .modal-backdrop ~ .modal-backdrop
{
    z-index : 1052 ;
}
.modal-backdrop ~ .modal-backdrop ~ .modal-backdrop ~ .modal-backdrop
{
    z-index : 1053 ;
}

這將處理嵌套最多 4 層的模態，這超出了我的需要。

Answer 11

嘗試這個：

// Hide the login modal
$('#login').modal('hide');

// Show the next modal after the fade effect is finished
setTimeout(function(){ $('#lost').modal('show'); }, 500);

這個簡單的技巧對我有用。

Answer 12

對於使用引導程序 4 的人https://jsfiddle.net/helloroy/tmm9juoh/

 var modal_lv = 0; $('.modal').on('shown.bs.modal', function (e) { $('.modal-backdrop:last').css('zIndex',1051+modal_lv); $(e.currentTarget).css('zIndex',1052+modal_lv); modal_lv++ }); $('.modal').on('hidden.bs.modal', function (e) { modal_lv-- });

 <script src="https://code.jquery.com/jquery-3.1.1.slim.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"></script> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/> <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#modal-a"> Launch demo modal a </button> <div class="modal fade" id="modal-a" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title" id="exampleModalLabel">Modal title</h5> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">&times;</span> </button> </div> <div class="modal-body"> <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#modal-b"> Launch another demo modal b </button> <p class="my-3"> Not good for fade In. </p> <p class="my-3"> who help to improve? </p> </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button> <button type="button" class="btn btn-primary">Save changes</button> </div> </div> </div> </div> <div class="modal fade" id="modal-b" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title" id="exampleModalLabel">Modal title</h5> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">&times;</span> </button> </div> <div class="modal-body"> <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#modal-c"> Launch another demo modal c </button> <p class="my-3"> But good enough for static modal </p> </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button> <button type="button" class="btn btn-primary">Save changes</button> </div> </div> </div> </div> <div class="modal" id="modal-c" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title" id="exampleModalLabel">Modal title</h5> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">&times;</span> </button> </div> <div class="modal-body"> <p class="my-3">That's all.</p> </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button> <button type="button" class="btn btn-primary">Save changes</button> </div> </div> </div> </div>

Answer 13

您可以使用此代碼使用超過 2 個模態（此示例使用 3 個模態）：

 $('.modal').on('shown.bs.modal', function (e) { $('.modal.show').each(function (index) { $(this).css('z-index', 1101 + index*2); }); $('.modal-backdrop').each(function (index) { $(this).css('z-index', 1101 + index*2-1); }); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" crossorigin="anonymous"> <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js" crossorigin="anonymous"></script> <a data-toggle="modal" href="#myModal1" class="btn btn-primary">Launch modal</a> <div class="modal" id="myModal1"> <div class="modal-dialog modal-lg"> <div class="modal-content"> <div class="modal-header"> <h4 class="modal-title">Modal 1</h4> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> </div> <div class="container"></div> <div class="modal-body"> <p> Content 1. </p> <a data-toggle="modal" href="#myModal2" class="btn btn-primary">Launch modal 2</a> </div> <div class="modal-footer"> <a href="#" data-dismiss="modal" class="btn">Close</a> </div> </div> </div> </div> <div class="modal" id="myModal2"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <h4 class="modal-title">modal 2</h4> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> </div> <div class="container"></div> <div class="modal-body"> <p> modal 2 </p> </div> <div class="modal-footer"> <a href="#" data-dismiss="modal" class="btn">Close</a> <a href="#" class="btn btn-primary">Save changes</a> <a data-toggle="modal" href="#myModal3" class="btn btn-primary">Launch modal3</a> </div> </div> </div> </div> <div class="modal" id="myModal3"> <div class="modal-dialog modal-sm"> <div class="modal-content"> <div class="modal-header"> <h4 class="modal-title">Modal 3</h4> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> </div> <div class="container"></div> <div class="modal-body"> <p> modal 3 </p> </div> <div class="modal-footer"> <a href="#" data-dismiss="modal" class="btn">Close</a> </div> </div> </div>

Answer 14

我的代碼使用 data-dismiss 運行良好。

<li class="step1">
    <a href="#" class="button-popup" data-dismiss="modal" data-toggle="modal" data-target="#lightbox1">
        <p class="text-label">Step 1</p>
        <p class="text-text">Plan your Regime</p>
    </a>

</li>
<li class="step2">
    <a href="#" class="button-popup" data-dismiss="modal" data-toggle="modal" data-target="#lightbox2">
        <p class="text-label">Step 2</p>
        <p class="text-text">Plan your menu</p>
    </a>
</li>
<li class="step3 active">
    <a href="#" class="button-popup" data-toggle="modal" data-dismiss="modal" data-target="#lightbox3">
        <p class="text-label">Step 3</p>
        <p class="text-text">This Step is Undone.</p>
    </a>
</li>

Answer 15

我的可滾動模式也遇到了一些問題，所以我做了這樣的事情：

  $('.modal').on('shown.bs.modal', function () {
    $('body').addClass('modal-open');
    // BS adds some padding-right to acomodate the scrollbar at right
    $('body').removeAttr('style');
  })

  $(".modal [data-toggle='modal']").click(function(){
    $(this).closest(".modal").modal('hide');
  });

它將服務於出現的模態中的任何模態。 請注意，第一個已關閉，因此第二個可以出現。 Bootstrap 結構沒有變化。

Answer 16

我一起走了一條不同的路線，我決定“去巢”他們。 也許有人會覺得這很方便......

var $m1 = $('#Modal1');
var $innermodal = $m1.find(".modal");     //get reference to nested modal
$m1.after($innermodal);                  // snatch it out of inner modal and put it after.

Answer 17

為什么不直接改變模態體的內容呢？

    window.switchContent = function(myFile){
        $('.modal-body').load(myFile);
    };

在模態中只需放置一個鏈接或一個按鈕

    <a href="Javascript: switchContent('myFile.html'); return false;">
     click here to load another file</a>

如果您只想在 2 種模式之間切換：

    window.switchModal = function(){
        $('#myModal-1').modal('hide');
        setTimeout(function(){ $('#myModal-2').modal(); }, 500);
        // the setTimeout avoid all problems with scrollbars
    };

在模態中只需放置一個鏈接或一個按鈕

    <a href="Javascript: switchModal(); return false;">
     click here to switch to the second modal</a>

Answer 18

關閉第一個 Bootstrap modal 並動態打開新的 modal。

$('#Modal_One').modal('hide');
setTimeout(function () {
  $('#Modal_New').modal({
    backdrop: 'dynamic',
    keyboard: true
  });
}, 500);

Answer 19

這個線程很舊，但對於那些來自谷歌的人來說，我提供了一個混合了我在網上找到的所有答案的解決方案。

這將確保正在添加級別類：

$(document).on('show.bs.modal', '.modal', function (event) {
  $(this).addClass(`modal-level-${$('.modal:visible').length}`);
});

在我的 SCSS 中，我寫了一條支持主模式和頂部 10 的規則（10 是因為從z-index: 1060彈出窗口發生），如果需要，您可以在_variables.scss中添加級別計數：

@for $level from 0 through 10 {
  .modal-level-#{$level} {
    z-index: $zindex-modal + $level;

    & + .modal-backdrop {
      z-index: $zindex-modal + $level - 1;
    }
  }
}

不要忘記你不能在 modal 里面有 modal，因為它們的控件會被弄亂。 在我的情況下，我所有的模態都在body的末尾。

最后，正如下面的成員也提到的那樣，在關閉一個模式后，您需要在body上保持modal-open類：

$(document).on('hidden.bs.modal', function (e) {
  if ($('.modal:visible').length > 0) {
    $('body').addClass('modal-open');
  }
});

Answer 20

H Dog 給出的答案很好，但這種方法實際上在 Internet Explorer 11 中給了我一些模態閃爍。引導程序將首先隱藏模態刪除 'modal-open' 類，然后（使用 H Dogs 解決方案）我們添加'modal-open' 類。 我懷疑這會以某種方式導致我看到的閃爍，可能是由於 HTML/CSS 渲染速度較慢。

另一個解決方案是首先防止引導程序從 body 元素中刪除“modal-open”類。 使用 Bootstrap 3.3.7，內部hideModal函數的這種覆蓋對我來說非常有效。

$.fn.modal.Constructor.prototype.hideModal = function () {
    var that = this
    this.$element.hide()
    this.backdrop(function () {
        if ($(".modal:visible").length === 0) {
            that.$body.removeClass('modal-open')
        }
        that.resetAdjustments()
        that.resetScrollbar()
        that.$element.trigger('hidden.bs.modal')
    })
}

在此覆蓋中，“modal-open”類僅在屏幕上沒有可見模式時才被刪除。 並且您可以防止一幀刪除和添加類到 body 元素。

只需在加載引導程序后包含覆蓋即可。

Answer 21

嘗試這個：

$('.modal').on('hidden.bs.modal', function () {
//If there are any visible
  if($(".modal:visible").length > 0) {
      //Slap the class on it (wait a moment for things to settle)
      setTimeout(function() {
          $('body').addClass('modal-open');
      },100)
  }
});

Answer 22

如何打開引導模態打開另一個模態？

使用此鏈接： http : //jschr.github.io/bootstrap-modal/bs3.html

Answer 23

如果您沒有正確關閉第一個模式，將會出現滾動故障。 這是使用 Bootstrap 4 的示例

HTML：

<div class="modal fade" id="modal-1">
  <div class="modal-dialog">
    <div class="modal-content">
      <button onclick="goToModal2">
        Go To Modal 2
      </button>
    </div>
  </div>
</div>

<div class="modal fade" id="modal-2">
<div class="modal-dialog">
    <div class="modal-content">
      <button onclick="goToModal1">
        Go To Modal 1
      </button>
    </div>
  </div>
</div>

Javascript：

function goToModal2(){
  $("#modal-1").modal("hide");
  $("#modal-1").on("hidden.bs.modal", () => {
    $("#modal-2").modal("show");
    $("#modal-1").unbind("hidden.bs.modal");
  });
}

function goToModal1(){
  $("#modal-2").modal("hide");
  $("#modal-2").on("hidden.bs.modal", () => {
    $("#modal-1").modal("show");
    $("#modal-2").unbind("hidden.bs.modal");
  });
}

雖然這不是最好的方法。 但它對我來說非常有效。

Answer 24

也許，還不錯：

<style>
#modal2 .modal-content{
box-shadow: 0 0 50px 10px #999 !important;
}
</style>

Answer 25

 $(document).on('hidden.bs.modal', function (event) { if ($('.modal:visible').length) { $('body').addClass('modal-open'); } });