從模態顯示的自舉模態不顯示

Question

我正在啓動一個模態模態，它不會出現在第一個模態上。我的模態在發射時會有一些事件被調用：

$("#noteModal").on("show.bs.modal", function (e) { 
    var link = $(e.relatedTarget); 
    $(this).find(".modal-body").load(link.attr("href")); 
}); 

$("#notesModal").on("show.bs.modal", function (e) { 
    var link = $(e.relatedTarget); 
    $(this).find(".modal-body").load(link.attr("href")); 
}); 

模態點火正常但沒有出現在第一個模態上。如果我點擊屏幕上的任何地方，第二個模式的行爲就好像它消失，然後第一個模式仍然顯示。

我試過做第一和第二模態的隱藏/顯示，但似乎沒有工作。

Answer 1

您可以使用第一個模式中的hidden.bs.modal事件來顯示第二個模態，而第一個模態中的按鈕將在點擊時隱藏第一個模態。

聽起來很蠢，我知道，但這裏是一個例子。 雖然這不會疊加模態窗口。 如果你想他們堆棧我會說你去什麼史蒂夫建議在評論中。

而僅僅是爲了記錄：

Modals modal.js

多模態開不支持

一定不要打開一個模式，而另一種是仍然可見。一次顯示多個模式需要自定義代碼。

var $firstModal = $('#first-modal'), 
 
    $secondModal = $('#second-modal'), 
 
    $innerModalBtn = $firstModal.find('.btn-block'); 
 

 

 
$firstModal.on('hidden.bs.modal', function (e) { 
 
    $secondModal.modal('show'); 
 
}) 
 

 
$innerModalBtn.on('click', function() { 
 
    $firstModal.modal('hide'); 
 
})

<!-- Latest compiled and minified CSS --> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous"> 
 

 
<!-- Optional theme --> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous"> 
 

 
<script src="https://code.jquery.com/jquery-2.2.0.min.js"></script> 
 
<!-- Latest compiled and minified JavaScript --> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script> 
 

 
<div class="container"> 
 
    <div class="row"> 
 
    <div class="col-sm-12 col-md-8 col-md-offset-2"> 
 
     <button type="button" type="button" class="btn btn-default btn-lg btn-block" data-toggle="modal" data-target="#first-modal">Open Modal</button> 
 
    </div> 
 
    </div> 
 
</div> 
 

 

 
<div id="first-modal" class="modal fade" tabindex="-1" role="dialog"> 
 
    <div class="modal-dialog"> 
 
    <div class="modal-content"> 
 
     <div class="modal-header"> 
 
     <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button> 
 
     <h4 class="modal-title">First Modal</h4> 
 
     </div> 
 
     <div class="modal-body"> 
 
     <button type="button" type="button" class="btn btn-default btn-lg btn-block">Open Second Modal</button> 
 
     </div> 
 
     <div class="modal-footer"> 
 
     <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
 
     </div> 
 
    </div><!-- /.modal-content --> 
 
    </div><!-- /.modal-dialog --> 
 
</div><!-- /.modal --> 
 

 

 
<div id="second-modal" class="modal fade" tabindex="-1" role="dialog"> 
 
    <div class="modal-dialog"> 
 
    <div class="modal-content"> 
 
     <div class="modal-header"> 
 
     <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button> 
 
     <h4 class="modal-title">Second Modal</h4> 
 
     </div> 
 
     <div class="modal-body"> 
 
     <p>One fine body&hellip;</p> 
 
     </div> 
 
     <div class="modal-footer"> 
 
     <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
 
     </div> 
 
    </div><!-- /.modal-content --> 
 
    </div><!-- /.modal-dialog --> 
 
</div><!-- /.modal -->