Bootstrap模式：closures当前，打开新的
我看了一会儿，但我找不到解决scheme。 我想要以下内容：
- 在Bootstrap模式中打开一个URL。 我有这个课程。 所以内容是dynamic加载的。
- 当用户按下这个模式中的一个button时，我想要隐藏当前的模式，之后，我想要一个新的模式用新的URL（用户点击）打开。 第二个模态的这个内容也是dynamic加载的。
- 如果用户closures了第二个模态，第一个模态必须再次返回。
我一直盯着这几天，希望有人能帮助我。
提前致谢。
没有看到具体的代码，很难给你一个确切的答案。 但是，从Bootstrap文档中，您可以像这样隐藏模式：
$('#myModal').modal('hide') 然后，显示另一个模式，一旦隐藏：
$('#myModal').on('hidden', function () { // Load up a new modal... $('#myModalNew').modal('show') })
你将不得不find一种方法将url推送到新的模式窗口，但我认为这将是微不足道的。 没有看到代码，很难举一个例子。
我知道这是一个迟到的答案，但它可能是有用的。 这是一个正确和干净的方式来完成这个，就像上面提到的@ karima。 你实际上可以一次激发两个function， 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>
演示
这不完全是响应，但是当你想closures当前的模式并打开一个新的模式时，它是有用的。
在同一个button的html中，你可以通过data-dismiss来closures当前的模式，直接用data-target打开一个新的模式：
<button class="btn btn-success" data-toggle="modal" data-target="#modalRegistration" data-dismiss="modal">Register</button>
我用这个方法：
$(function() { return $(".modal").on("show.bs.modal", function() { var curModal; curModal = this; $(".modal").each(function() { if (this !== curModal) { $(this).modal("hide"); } }); }); });
data-dismiss="modal"是它会将你的内容转移到左边
我分享什么对我有用，问题表述是从pop2打开pop1
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; });
有了BootStrap 3，你可以试试这个：
var visible_modal = jQuery('.modal.in').attr('id'); // modalID or undefined if (visible_modal) { // modal is active jQuery('#' + visible_modal).modal('hide'); // close modal }
经过testing可以使用： http : //getbootstrap.com/javascript/#modals （首先点击“启动演示模式”）。
我有完全相同的问题，我的解决scheme只有当modal dialog有[angular色=“对话框”]属性：
/* * Find and Close current "display:block" dialog, * if another data-toggle=modal is clicked */ jQuery(document).on('click','[data-toggle*=modal]',function(){ jQuery('[role*=dialog]').each(function(){ switch(jQuery(this).css('display')){ case('block'):{jQuery('#'+jQuery(this).attr('id')).modal('hide'); break;} } }); });
我有同样的问题，因为滚动不起作用，如果你使用
data-toggle="modal" data-target="TARGET-2"
和这个结合
data-dismiss="modal"
滚动不正常工作，并恢复滚动页面而不是模式。 这是由于数据closures从标签中删除模式公开类。
我最终的解决scheme是设置内部模块的HTML，并使用CSS来淡入淡出的文本。
$("#buttonid").click(function(){ $('#modal_id_you_want_to_hid').modal('hide') }); // same as above button id $("#buttonid").click(function(){ $('#Modal_id_You_Want_to_Show').modal({backdrop: 'static', keyboard: false})});
我用另一种方式：
$('#showModal').on('hidden.bs.modal', function() { $('#easyModal').on('shown.bs.modal', function() { $('body').addClass('modal-open'); }); });
如果你想closures以前打开的模式，而打开新的模式，那么你必须从JavaScript / jquery通过首先closures当前打开的模式，然后给400ms超时，让它closures，然后打开如下面的代码新的模式：
$('#currentModal').modal('hide'); setTimeout(function() { //your code to be executed after 200 msecond $('#newModal').modal({ backdrop: 'static'//to disable click close }) }, 400);//delay in miliseconds##1000=1second
如果您尝试使用data-dismiss="modal"来执行此操作，则会出现如同@gravity和@kuldeep所述的滚动问题。
使用点击function：
$('.btn-editUser').on('click', function(){ $('#viewUser').modal('hide'); // hides modal with id viewUser $('#editUser').modal('show'); // display modal with id editUser });
抬头：
确保你想要显示的是一个独立的模式。
因为我想达到和问题中提到的完全一样的东西，所以没有一个答案对我有帮助。
我为此创build了一个jQuery插件。
/* * Raj: This file is responsible to display the modals in a stacked fashion. Example: * 1. User displays modal A * 2. User now wants to display modal B -> This will not work by default if a modal is already displayed * 3. User dismisses modal B * 4. Modal A should now be displayed automatically -> This does not happen all by itself * * Trying to solve problem for: http://stackoverflow.com/questions/18253972/bootstrap-modal-close-current-open-new * */ var StackedModalNamespace = StackedModalNamespace || (function() { var _modalObjectsStack = []; return { modalStack: function() { return _modalObjectsStack; }, currentTop: function() { var topModal = null; if (StackedModalNamespace.modalStack().length) { topModal = StackedModalNamespace.modalStack()[StackedModalNamespace.modalStack().length-1]; } return topModal; } }; }()); // http://stackoverflow.com/a/13992290/260665 difference between $.fn.extend and $.extend jQuery.fn.extend({ // https://api.jquery.com/jquery.fn.extend/ showStackedModal: function() { var topModal = StackedModalNamespace.currentTop(); StackedModalNamespace.modalStack().push(this); this.off('hidden.bs.modal').on('hidden.bs.modal', function(){ // Subscription to the hide event var currentTop = StackedModalNamespace.currentTop(); if ($(this).is(currentTop)) { // 4. Unwinding - If user has dismissed the top most modal we need to remove it form the stack and display the now new top modal (which happens in point 3 below) StackedModalNamespace.modalStack().pop(); } var newTop = StackedModalNamespace.currentTop(); if (newTop) { // 3. Display the new top modal (since the existing modal would have been hidden by point 2 now) newTop.modal('show'); } }); if (topModal) { // 2. If some modal is displayed, lets hide it topModal.modal('hide'); } else { // 1. If no modal is displayed, just display the modal this.modal('show'); } }, });
工作小提琴参考， JSFiddle： https ：//jsfiddle.net/gumdal/67hzgp5c/
你只需要调用我的新API“ showStackedModal() ”而不是“ modal('show') ”。 隐藏部分仍然可以像以前一样，并显示和隐藏模式的堆叠方法自动照顾。
BootStrap 3.x简单而优雅的解决scheme。 同样的模式可以用这种方式重用。
$("#myModal").modal("hide"); $('#myModal').on('hidden.bs.modal', function (e) { $("#myModal").html(data); $("#myModal").modal(); // do something more... });
在第一个模式中：
用下面的closures链接replace脚注中的模式解除链接。
<div class="modal-footer"> <a href="#" data-dismiss="modal" class="btn btn-primary" data-toggle="modal" data-target="#second_model_id">Close</a> </div>
在第二个模式中：
然后第二个模式replace顶部div与下面的div标签。
<div class="modal fade" tabindex="-1" role="dialog" aria-labelledby="add text for disabled people here" aria-hidden="true" id="second_model_id">
