Bootstrap多層模態框modal嵌套問題

一、問題

在項目里忽然新加了一個需求，在原本彈出的模態框里，點擊模態框里面的按鈕再彈出一個模態框，出來另個模態框來展示詳細信息。此時就存在兩個模態框在這個需求沒加之前有一個彈出的模態框也是需要繼續點擊（大致示意圖如下），那個是時候去查過bootstrap的這個modal，官網上寫着：

不支持同時打開多個模態框
千萬不要在一個模態框上重疊另一個模態框。要想同時支持多個模態框，需要自己寫額外的代碼來實現。

於是就沒打算同時打開多個模態框，因為第二個模態框打開后不再需要第一個模態框，於是就將這個功能改成當點擊按鈕后，將原本的模態框關閉，然后再出現第二個模態框，不讓他們重疊顯示。

 

<div class="modal fade" tabindex="-1" role="dialog" aria-labelledby="Info" id="Info">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title">模態框一標題</h4>
            </div>
            <div class="modal-body">
                    <button type="button" class="ui-button ui-button-small ui-button-outline-primary" data-dismiss="modal">點擊按鈕</button>
            </div>
            <!--<div class="modal-footer">-->
            <!--<button type="button" class="ui-button ui-button-small ui-button-outline-primary" data-dismiss="modal"-->
            <!--aria-label="Close"><span aria-hidden="true">關閉</span></button>-->
            <!--</div>-->
        </div>
    </div>
</div>

  $('#Info').on('hidden.bs.modal', function () {
      //模態框關閉時執行
      $("#Info2").modal({
        keyboard: false,
        show:true
      });
    });

給按鈕上綁定data-dismiss="modal"屬性，當點擊按鈕的時候，執行關閉操作，然后將第二個模態框打開。

現在新的需求是點擊可查看圖片詳情，關閉圖片詳情還需要繼續回到之前的模態框，進行其他的操作（如下圖所示），所以之前的那種解決方案不再適用，必須要實現模態框的疊加。

<p class="m2">查看圖片</p>
//第二層預覽圖片的模態框
<div id="secondmodal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel">
    <div class="modal-dialog modal-sm2" role="document">
        <div class="modal-content">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                <span aria-hidden="true">×</span>
            </button>
            <div class="modal-body">
                <div class="icon-"><img src="/assets/app/images/yulan.png" alt="1"></div>
            </div>
        </div>
    </div>
</div>

  $('.m2').on("click", function () {
            $('#secondmodal').modal();
        });

好像這種層疊的模態框會使背景顏色不斷疊加變深的，這種好像是通過修改控制背景顏色的class和js方法便可解決。（沒有去試過）