引导模态从模态不显示

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