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">×</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">×</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">×</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">×</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">×</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">×</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'); } });
