Bootstrap模态:关闭当前,打开新的

Question

我已经找了一段时间,但我找不到解决方案.我想要以下内容:

• 在Bootstrap模式中打开一个URL.我有这个工作偏离正轨.所以内容是动态加载的.
• 当用户按下此模式中的按钮时,我希望隐藏当前模态,并在此之后立即使用新URL(用户单击该URL)打开新模式.第二个模态的内容也是动态加载的.
• 如果用户然后关闭第二个模态,则第一个模态必须再次返回.

我已经盯着这几天了,希望有人可以帮助我.

提前致谢.

Answer 1

我知道这是一个迟到的答案,但它可能有用.正如上面提到的@karima所述,这是完成这项工作的正确而干净的方法.你实际上可以同时触发两个函数; trigger和dismiss模态.

HTML标记;

<!-- Button trigger modal -->
<ANY data-toggle="modal" data-target="TARGET">...</ANY>

<div class="modal fade" id="SELECTOR" tabindex="-1">
  <div class="modal-dialog">
   <div class="modal-content">
    <div class="modal-body"> ... </div>
     <div class="modal-footer">           <!-- ? -->  <!--      ?      -->
      <ANY data-toggle="modal" data-target="TARGET-2" data-dismiss="modal">...</ANY>
     </div>
   </div>
  </div>
</div>

演示

Answer 2

如果没有看到具体的代码,很难给出准确的答案.但是,从Bootstrap文档中,您可以隐藏模态,如下所示:

$('#myModal').modal('hide')

然后,一旦它被隐藏,显示另一个模态:

$('#myModal').on('hidden.bs.modal', function () {
  // Load up a new modal...
  $('#myModalNew').modal('show')
})

你将不得不找到一种方法将URL推送到新的模态窗口,但我认为这是微不足道的.没有看到代码,很难给出一个例子.

Answer 3

这并不完全是响应,但是当你想要关闭当前模态并打开一个新模态时它很有用.

在同一个按钮的html中,您可以要求使用data-dismiss关闭当前模态并直接使用data-target打开一个新模态:

<button class="btn btn-success" 
data-toggle="modal" 
data-target="#modalRegistration" 
data-dismiss="modal">Register</button>

Answer 4

问题data-dismiss="modal"是它会将您的内容转移到左侧

我正在分享对我有用的东西,问题陈述是开放pop1的pop2

JS代码

var showPopup2 = false;
$('#popup1').on('hidden.bs.modal', function () {
    if (showPopup2) {
        $('#popup2').modal('show');
        showPopup2 = false;
    }
});

$("#popup2").click(function() {
    $('#popup1').modal('hide');
    showPopup2 = true;
});

Answer 5

我用这个方法:

$(function() {
  return $(".modal").on("show.bs.modal", function() {
    var curModal;
    curModal = this;
    $(".modal").each(function() {
      if (this !== curModal) {
        $(this).modal("hide");
      }
    });
  });
});

Answer 6

如上所述，在同一个按钮的 html 中，您可以要求使用 data-dismiss 关闭当前模态并直接使用 data-target 打开一个新模态：

<button class="btn btn-success" data-toggle="modal" data-target="#modalRegistration" data-dismiss="modal">Register</button>

但这会导致滚动条消失，你会注意到如果第二个模态比第一个高

所以解决方案是在模态内联样式中添加以下样式：

Style = "overflow-y : scroll ; "