引導模態從模態不顯示

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事件來顯示第二個模態，而第一個模態內的按鈕將在單擊時隱藏第一個模態。

聽起來很蠢，我知道，但這是一個例子。 但是，這不會將模態窗口堆疊在一起。 如果您希望它們堆疊在一起，我會說您贊同Steve在評論中的建議。

僅作記錄：

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