jQuery 从另一个模态打开一个模态并关闭第一个（启动）模态
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/25319034/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Open a Modal from another modal and close the first (launching) modal
提问by User
I'm using Bootstrap Modal Window plugin its work fine but i would like to open another model window when i click next and close first one. how can i do it?
我正在使用 Bootstrap Modal Window 插件，它工作正常，但是当我单击下一步并关闭第一个时，我想打开另一个模型窗口。我该怎么做？
$('[data-toggle="modal"]').click(function(e)
{
e.preventDefault();
var url = $(this).attr('href');
if (url.indexOf('#') == 0)
{
$(url).modal('open');
}
else
{
$.get(url, function(data)
{
$(data).modal();
}).success(function() { $('input:text:visible:first').focus(); });
}
});
<a href="next.html" data-toggle="modal">Add Record</a>
next.html File Code
next.html 文件代码
<div class="modal fade" id="compose-modal" role="dialog" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">First Window</h4>
</div>
<form action="#" method="post">
<div class="modal-footer clearfix">
<button type="button" data-dismiss="modal">Discard</button>
<button type="submit">Submit</button>
<a href="next2.html" data-toggle="modal" >Next</a>
</div>
</form>
</div>
</div>
</div>
回答by Christina
A more updated answer is found below: https://stackoverflow.com/a/44391959/1004312
更新的答案如下：https: //stackoverflow.com/a/44391959/1004312
You are opening a modal from another modal and closing the first. If you're using Bootstrap 3, you can do the following:
您正在从另一个模态打开一个模态并关闭第一个。如果您使用的是 Bootstrap 3，则可以执行以下操作：
DEMO: http://jsbin.com/venek/1/edit
演示：http: //jsbin.com/venek/1/edit
In the first modal put the link to the next modal (#modal-1 & #modal-2 are example ids)
在第一个模态中放置指向下一个模态的链接（#modal-1 和 #modal-2 是示例 ID）
<a href="#modal-2" data-toggle="modal" data-dismiss="modal">Next</a>
In the second modal put the link to the first:
在第二个模式中，将链接放在第一个：
<a href="#modal-1" data-toggle="modal" data-dismiss="modal">Previous</a>
回答by Matthew Hudson
All right everybody, stand back; I've got this.
好吧，各位，退后；我有这个。
This method negates both the padding & scrolling issues present in other methods (see bottom) and is [IMO] the cleanest way to achieve the required functionality using Bootstrap Modals.
这种方法消除了其他方法中存在的填充和滚动问题（见底部），并且是 [IMO] 使用 Bootstrap Modals 实现所需功能的最干净的方法。
Inline
排队
<a onclick="$('.modal-to-close').one('hidden.bs.modal', function() { $('.modal-to-open').modal('show'); }).modal('hide');">Open Modal</a>
Full Fat:
全脂：
<script>
$(function () {
$('.selector').click(function() {
$('.modal-to-close').one('hidden.bs.modal', function() {
$('.modal-to-open').modal('show');
}).modal('hide');
});
});
</script>
<a class="selector">Open Modal</a>
Beastmode:
野兽模式：
<script>
$(function () {
$('[data-bm-close][data-bm-open]').on('click', function () {
var $this = $(this);
$($this.data('bm-close')).one('hidden.bs.modal', function () {
$($this.data('bm-open')).modal('show');
}).modal('hide');
});
});
</script>
<a data-bm-close=".modal-to-close" data-bm-open=".modal-to-open">Open Modal</a>
Tip:Unless you need to do this more than once, I recommend using the Inlineversion.
提示：除非您需要多次执行此操作，否则我建议使用内联版本。
Issues present in other answers
其他答案中存在的问题
回答by ucpc
<a data-toggle="modal" data-target="#open1" data-dismiss="modal">OPEN 1</a>
<a data-toggle="modal" data-target="#open2" data-dismiss="modal">OPEN 2</a>
$('.modal).on('show.bs.modal',function(){
setTimeout(function(){
$('body').addClass('modal-open');
},800);
});
回答by serialko
@Deepak Yadav problem: data-dismiss="modal" removes modal-open class from body tag maybe there is one solution with JS:
@Deepak Yadav 问题：data-dismiss="modal" 从 body 标签中删除 modal-open 类也许 JS 有一种解决方案：
Add class to next-previous links
将类添加到下一个上一个链接
<a class="nextStep" href="#modal-2" data-toggle="modal" data-dismiss="modal">Next</a>
<a class="previousStep" href="#modal-1" data-toggle="modal" data-dismiss="modal">previous</a>
JS:
JS：
var $body = $('body')
$("a.nextStep").click(function(){
$body.addClass('modal1-on')
});
$("a.previousStep").click(function(){
$body.addClass('modal2-on')
});
$('#modal-1').on('hidden.bs.modal', function () {
$body.removeClass('modal2-on')
});
$('#modal-2').on('hidden.bs.modal', function () {
$body.removeClass('modal1-on')
});
Then css:
然后css：
body.modal1-on, body.modal2-on {overflow: hidden;}
回答by govind
when u close bootstrap second popup,only second close and first is open
当你关闭引导程序第二个弹出窗口时，只有第二个关闭，第一个打开
for that we can use second popup close button on bootstrap first modal id
为此，我们可以在引导第一个模态 id 上使用第二个弹出关闭按钮
example
例子
<button type="button" class="btn btn-default" data-toggle="modal" data-target="#myModal1" data-dismiss="modal">Close</button>
回答by JamesWilson
Here is a recipe that lets you link two modals together in a general way. The first modal has a button that launches the second modal. When the second modal is closed the first modal is reopened.
这是一个配方，可让您以一般方式将两个模态链接在一起。第一个模态有一个按钮可以启动第二个模态。当第二个模态关闭时，第一个模态重新打开。
// Prevent modal on top of modal while maintaining dismissibility.
// If a sub-modal is dismissed the original modal is reopened.
$('.modal [data-toggle="modal"]').on('click', function() {
var curModal = $(this).closest('.modal');
var nextModal = $($(this).attr('data-target'));
if (curModal != nextModal) {
curModal.modal('hide');
nextModal.on('hide.bs.modal', function() {
curModal.modal('show');
});
}
});
Note: This should only be used if you have at most 2 linked modals.Button on the second modal opening a third would cause unexpected behavior as it would close the second modal, open the third, and reopen the first as well.
注意：仅当您最多有 2 个链接的模态时才应使用此选项。第二个模式上的按钮打开第三个会导致意外行为，因为它会关闭第二个模式，打开第三个，并重新打开第一个。
