jQuery Bootstrap 模式：关闭当前，打开新
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18253972/
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
Bootstrap modal: close current, open new
提问by Eelco Luurtsema
I have looked for a while, but I can't find a solution for this. I want the following:
我已经寻找了一段时间，但我找不到解决方案。我想要以下内容：
- Open an URL inside a Bootstrap modal. I have this working off course. So the content is loaded dynamically.
- When an user pushes a button inside this modal, I want the current modal to hide, and immediately after that, I want a new modal to open with the new URL (which the user clicked on). This content of the 2nd modal is also loaded dynamically.
- If the user then closes that 2nd modal, the first modal must come back again.
- 在 Bootstrap 模式中打开一个 URL。我有这个工作。所以内容是动态加载的。
- 当用户按下此模式内的按钮时，我希望隐藏当前模式，然后立即使用新 URL（用户单击的 URL）打开一个新模式。第二个模态的内容也是动态加载的。
- 如果用户随后关闭了第二个模态，则第一个模态必须再次返回。
I have been staring at this for days, hope someone can help me.
我已经盯着这个好几天了，希望有人能帮助我。
Thanks in advance.
提前致谢。
采纳答案by Tim Wasson
Without seeing specific code, it's difficult to give you a precise answer. However, from the Bootstrap docs, you can hide the modal like this:
没有看到具体的代码，很难给你一个准确的答案。但是，从 Bootstrap 文档中，您可以像这样隐藏模式：
$('#myModal').modal('hide')
Then, show another modal once it's hidden:
然后，在隐藏后显示另一个模式：
$('#myModal').on('hidden.bs.modal', function () {
// Load up a new modal...
$('#myModalNew').modal('show')
})
You're going to have to find a way to push the URL to the new modal window, but I'd assume that'd be trivial. Without seeing the code it's hard to give an example of that.
您将不得不找到一种方法将 URL 推送到新的模式窗口，但我认为这很简单。如果没有看到代码，很难给出一个例子。
回答by Mahmoud
I know this is a late answer, but it might be useful.
Here's a proper and clean way to get this done, as @karima's mentioned above. You can actually fire two functions at once; triggerand dismissthe modal.
我知道这是一个迟到的答案，但它可能有用。正如@karima 上面提到的那样，这是完成此操作的适当而干净的方法。你实际上可以一次触发两个函数；trigger和dismiss模态。
HTML Markup;
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>
回答by Karima Rafes
It's not exactly the response but it's useful when you want to close the current modal and open a new modal.
它不完全是响应，但是当您想关闭当前模态并打开新模态时它很有用。
In the html in the same button, you can ask to close the current modal with data-dismiss and open a new modal directly with data-target:
在同一个按钮的 html 中，您可以要求使用 data-dismiss 关闭当前模态并直接使用 data-target 打开一个新模态：
<button class="btn btn-success"
data-toggle="modal"
data-target="#modalRegistration"
data-dismiss="modal">Register</button>
回答by Kuldeep Dangi
Problem with data-dismiss="modal"is it will shift your content to left
问题data-dismiss="modal"是它会将您的内容向左移动
I am sharing what worked for me, problem statment was opening pop1from pop2
我正在分享对我有用的东西，问题陈述是pop1从pop2
JS CODE
代码
var showPopup2 = false;
$('#popup1').on('hidden.bs.modal', function () {
if (showPopup2) {
$('#popup2').modal('show');
showPopup2 = false;
}
});
$("#popup2").click(function() {
$('#popup1').modal('hide');
showPopup2 = true;
});
回答by Josh Dean
I use this method:
我用这个方法：
$(function() {
return $(".modal").on("show.bs.modal", function() {
var curModal;
curModal = this;
$(".modal").each(function() {
if (this !== curModal) {
$(this).modal("hide");
}
});
});
});
回答by Husnain Shabbir
By using the following code you can hide first modal and immediately open second modal, by using same strategy you can hide second modal and show the first one.
通过使用以下代码，您可以隐藏第一个模式并立即打开第二个模式，通过使用相同的策略，您可以隐藏第二个模式并显示第一个。
$("#buttonId").on("click", function(){
$("#currentModalId").modal("hide");
$("#currentModalId").on("hidden.bs.modal",function(){
$("#newModalId").modal("show");
});
});
回答by Suresh Kamrushi
You need to add following attribute to the link or button where you want add this functionality:
您需要将以下属性添加到要添加此功能的链接或按钮：
data-dismiss="modal" data-toggle="modal" id="forgotPassword" data-target="#ModalForgotPassword"
A detaile blog: http://sforsuresh.in/bootstrap-modal-window-close-current-open-new-modal/
详细博客：http://sforsuresh.in/bootstrap-modal-window-close-current-open-new-modal/
回答by Alvin K.
With BootStrap 3, you can try this:-
使用 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
}
Tested to work with: http://getbootstrap.com/javascript/#modals(click on "Launch Demo Modal" first).
经测试可与：http: //getbootstrap.com/javascript/#modals（首先单击“Launch Demo Modal”）一起使用。
回答by Jonny
I have exact same problem, and my solution is only if modal dialog have [role="dialog"] attribute :
我有完全相同的问题，我的解决方案仅当模态对话框具有 [role="dialog"] 属性时：
/*
* 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;}
}
});
});
回答by M. Lak
data-dismiss="modal"
it is used to close the existing opened model. you can set it to the new model
它用于关闭现有的打开模型。您可以将其设置为新模型
