Bootstrap:在Modal中打开另一个Modal

所以,我使用这个代码在当前打开的模态窗口中打开另一个模态窗口:

<a onclick=\"$('#login').modal('hide');$('#lost').modal('show');\" href='#'>Click</a> 

会发生什么,对于500毫秒的滚动条将重复。 我猜是因为现在的模态还在淡出。 然而,它看起来非常不顺畅和口吃。

我将不胜感激任何build议来解决这个问题。

另外,在一个单一的事件不专业?

我正在使用引导版本3.0。

编辑:我想这是必要的,以减less淡出模态的时间。 这怎么可能?

data-dismiss使当前的模态窗口closures

data-toggle打开一个新的模式,其中的href内容

 <a data-dismiss="modal" data-toggle="modal" href="#lost">Click</a> 

要么

 <a data-dismiss="modal" onclick="call the new div here">Click</a> 

请让我们知道它是否有效。

  • 你也可能想看看模态文档

我的解决scheme并没有closures较低的模式,但真正的堆叠在上面。 它正确保留了滚动行为。 在Bootstrap中进行testing3.要使模块按预期进行堆叠,您需要按照从最低到最高的Html标记进行sorting。

 $(document).on('hidden.bs.modal', function (event) { if ($('.modal:visible').length) { $('body').addClass('modal-open'); } }); 

要在当前打开的模态窗口中打开另一个模态窗口,
你可以使用引导模式

bootstrap-mode DEMO

您可以通过调用hidden.bs.modal事件实际检测旧模式何时closures:

  $('.yourButton').click(function(e){ e.preventDefault(); $('#yourFirstModal') .modal('hide') .on('hidden.bs.modal', function (e) { $('#yourSecondModal').modal('show'); $(this).off('hidden.bs.modal'); // Remove the 'on' event binding }); }); 

欲了解更多信息: http : //getbootstrap.com/javascript/#modals-events

尝试这个

 <!DOCTYPE html> <html lang="en"> <head> <title></title> <meta charset="utf-8"> <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> </head> <body> <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#test1">Open Modal 1 </button> <div id="test1" class="modal fade" role="dialog" style="z-index: 1400;"> <div class="modal-dialog"> <!-- Modal content--> <div class="modal-content"> <div class="modal-body"> <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#test2">Open Modal 2</button> </div> </div> </div> </div> <div id="test2" class="modal fade" role="dialog" style="z-index: 1600;"> <div class="modal-dialog"> <!-- Modal content--> <div class="modal-content"> <div class="modal-body"> content </div> </div> </div> </div> </body> </html> 

处理一个有很多模态的项目,调用其他模态和一些可能不知道每个button每次启动的HTML人员。 和@gmaggio一样,经过长途跋涉后,勉强得出了类似的结论。

编辑:现在支持通过JavaScript调用模态。

编辑:从另一个模式打开滚动模式现在工作。

 $(document).on('show.bs.modal', function (event) { if (!event.relatedTarget) { $('.modal').not(event.target).modal('hide'); }; if ($(event.relatedTarget).parents('.modal').length > 0) { $(event.relatedTarget).parents('.modal').modal('hide'); }; }); $(document).on('shown.bs.modal', function (event) { if ($('body').hasClass('modal-open') == false) { $('body').addClass('modal-open'); }; }); 

只需将模态调用button放在正常的位置,如果它被拾取到模态内,它将首先closures当前模式,然后再打开data-target中指定的模式。 请注意, relatedTarget是由Bootstrap提供的。

我还添加了下面的内容来消除一点褪色:我相信可以做更多的事情。

 .modal-backdrop.fade + .modal-backdrop.fade { transition: opacity 0.40s linear 0s; } 

Twitter文件说自定义代码是必需的…

这与没有额外的JavaScript,但自定义CSS将强烈build议…

 <link href="http://netdna.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="//netdna.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> <!-- Button trigger modal --> <button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#modalOneModal"> Launch demo modal </button> <!-- Modal --> <div class="modal fade bg-info" id="modalOneModal" tabindex="-1" role="dialog" aria-labelledby="modalOneLabel" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content bg-info"> <div class="modal-header btn-info"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> <h4 class="modal-title" id="modalOneLabel">modalOne</h4> </div> <div id="thismodalOne" class="modal-body bg-info"> <!-- Button trigger modal --> <button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#twoModalsExample"> Launch demo modal </button> <div class="modal fade bg-info" id="twoModalsExample" style="overflow:auto" tabindex="-1" role="dialog" aria-hidden="true"> <h3>EXAMPLE</h3> </div> </div> <div class="modal-footer btn-info" id="woModalFoot"> <button type="button" class="btn btn-info" data-dismiss="modal">Close</button> </div> </div> </div> </div> <!-- End Form Modals --> 

Modal中的Modals:

 $('.modal-child').on('show.bs.modal', function () { var modalParent = $(this).attr('data-modal-parent'); $(modalParent).css('opacity', 0); }); $('.modal-child').on('hidden.bs.modal', function () { var modalParent = $(this).attr('data-modal-parent'); $(modalParent).css('opacity', 1); }); 
 <link href="bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <script src="bootstrap/3.3.7/js/bootstrap.min.js"></script> <a href="#myModal" role="button" class="btn btn-primary" data-toggle="modal">Modals in Modal</a> <div id="myModal" class="modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-dialog"> <!-- Modal content--> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal">&times;</button> <h4 class="modal-title">Modal Header</h4> </div> <div class="modal-body"> <a href="#myModal1" role="button" class="btn btn-primary" data-toggle="modal">Launch other modal 1</a> <a href="#myModal2" role="button" class="btn btn-primary" data-toggle="modal">Launch other modal 2</a> </div> </div> </div> </div> <div id="myModal1" class="modal modal-child" data-backdrop-limit="1" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" data-modal-parent="#myModal"> <div class="modal-dialog"> <!-- Modal content--> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal">&times;</button> <h4 class="modal-title">Modal Header 1</h4> </div> <div class="modal-body"> <p>Two modal body…1</p> </div> <div class="modal-footer"> <button class="btn btn-default" data-dismiss="modal" data-dismiss="modal" aria-hidden="true">Cancel</button> </div> </div> </div> </div> <div id="myModal2" class="modal modal-child" data-backdrop-limit="1" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" data-modal-parent="#myModal"> <div class="modal-dialog"> <!-- Modal content--> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal">&times;</button> <h4 class="modal-title">Modal Header 2</h4> </div> <div class="modal-body"> <p>Modal body…2</p> </div> <div class="modal-footer"> <button class="btn btn-default" data-dismiss="modal" data-dismiss="modal" aria-hidden="true">Cancel</button> </div> </div> </div> </div> 

尝试这个:

 // Hide the login modal $('#login').modal('hide'); // Show the next modal after the fade effect is finished setTimeout(function(){ $('#lost').modal('show'); }, 500); 

这个简单的黑客为我工作。

我的滚动模式也有一些问题,所以我做了这样的事情:

  $('.modal').on('shown.bs.modal', function () { $('body').addClass('modal-open'); // BS adds some padding-right to acomodate the scrollbar at right $('body').removeAttr('style'); }) $(".modal [data-toggle='modal']").click(function(){ $(this).closest(".modal").modal('hide'); }); 

它将用于任何模态的出现。 请注意,第一个closures所以第二个可以出现。 Bootstrap结构没有改变。

我的代码,使用数据closures工作得很好

 <li class="step1"> <a href="#" class="button-popup" data-dismiss="modal" data-toggle="modal" data-target="#lightbox1"> <p class="text-label">Step 1</p> <p class="text-text">Plan your Regime</p> </a> </li> <li class="step2"> <a href="#" class="button-popup" data-dismiss="modal" data-toggle="modal" data-target="#lightbox2"> <p class="text-label">Step 2</p> <p class="text-text">Plan your menu</p> </a> </li> <li class="step3 active"> <a href="#" class="button-popup" data-toggle="modal" data-dismiss="modal" data-target="#lightbox3"> <p class="text-label">Step 3</p> <p class="text-text">This Step is Undone.</p> </a> </li> 

closures第一个Bootstrap模态并dynamic打开新的模态。

 $('#Modal_One').modal('hide'); setTimeout(function () { $('#Modal_New').modal({ backdrop: 'dynamic', keyboard: true }); }, 500); 

我走了一条不同的路线,我决定“去”它们。 也许有人会发现这个方便…

 var $m1 = $('#Modal1'); var $innermodal = $m1.find(".modal"); //get reference to nested modal $m1.after($innermodal); // snatch it out of inner modal and put it after. 

对于使用引导程序的人4 https://jsfiddle.net/helloroy/tmm9juoh/

 var modal_lv = 0; $('.modal').on('shown.bs.modal', function (e) { $('.modal-backdrop:last').css('zIndex',1051+modal_lv); $(e.currentTarget).css('zIndex',1052+modal_lv); modal_lv++ }); $('.modal').on('hidden.bs.modal', function (e) { modal_lv-- }); 
 <script src="jquery-3.1.1.slim.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"></script> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/> <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#modal-a"> Launch demo modal a </button> <div class="modal fade" id="modal-a" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title" id="exampleModalLabel">Modal title</h5> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">&times;</span> </button> </div> <div class="modal-body"> <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#modal-b"> Launch another demo modal b </button> <p class="my-3"> Not good for fade In. </p> <p class="my-3"> who help to improve? </p> </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button> <button type="button" class="btn btn-primary">Save changes</button> </div> </div> </div> </div> <div class="modal fade" id="modal-b" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title" id="exampleModalLabel">Modal title</h5> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">&times;</span> </button> </div> <div class="modal-body"> <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#modal-c"> Launch another demo modal c </button> <p class="my-3"> But good enough for static modal </p> </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button> <button type="button" class="btn btn-primary">Save changes</button> </div> </div> </div> </div> <div class="modal" id="modal-c" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title" id="exampleModalLabel">Modal title</h5> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">&times;</span> </button> </div> <div class="modal-body"> <p class="my-3">That's all.</p> </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button> <button type="button" class="btn btn-primary">Save changes</button> </div> </div> </div> </div> 
 $(document).on('hidden.bs.modal', function (event) { if ($('.modal:visible').length) { $('body').addClass('modal-open'); } });