twitter-bootstrap 显示成功警报后如何关闭引导模式和重定向
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/32344699/
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
How to close a bootstrap modal and redirect after success-alert displayed
提问by Jeffrey Juarez
I'm new to javascript/programming and I'm having trouble trying to close a bootstrap modal after a form submission returns with a alert-success message. What I'd like to happen is for the user to:
我是 javascript/编程的新手，在表单提交返回并带有警告成功消息后，我在尝试关闭引导模式时遇到了问题。我希望发生的事情是让用户：
- submit a form embedded in the modal.
- If successfully submitted,the alert-success message will display.
- If the alert-success displays, I'd like to have the modal window close
- (optionally) I'd like to reset the form
- 提交嵌入在模态中的表单。
- 如果成功提交，将显示成功警报消息。
- 如果显示警报成功，我希望关闭模态窗口
- （可选）我想重置表单
I've tried using javascript hide function but no luck.
我试过使用 javascript 隐藏功能，但没有运气。
$(document).ready(function(){
if($('#alert-success'))
{
$('#myModal').hide();
}
});
Any help would be appreciated!
任何帮助，将不胜感激！
Here is a sample code of what I'm trying to create (note: I've including dummy code since I don't have permission to use my company code here). link to code below found here also: http://jsbin.com/pidizetila/edit?html,output
这是我正在尝试创建的示例代码（注意：我包含了虚拟代码，因为我无权在此处使用我的公司代码）。链接到下面的代码也可以在这里找到：http: //jsbin.com/pidizetila/edit?html,output
<!-- Trigger the modal with a button -->
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>
<!-- Modal -->
<div id="myModal" class="modal fade" role="dialog">
<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">
<div class="alert alert-success">
<strong>Success!</strong> Indicates a successful or positive action.
</div>
</div>
</div>
</div>
</div>
回答by Shehary
This answer is just an example to give COMPLETE idea how to achieve, what OP asked in question.
这个答案只是一个例子，让完整的想法如何实现，OP提出的问题。
1. Submit a form embedded in the modal.
1. 提交嵌入在模态中的表单。
Modal With From
模态从
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>
<div id="myModal" class="modal fade bs-example-modal-sm" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog modal-sm">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span>
</button>
<h4 class="modal-title">Modal Form</h4>
</div>
<form id="myform" class="form-horizontal" role="form" method="POST">
<div class="modal-body">
<div class="form-group">
<div class="col-md-12">
<label class="control-label popup-label">First Name</label>
<input required type="text" class="form-control" name="firstname" value="">
</div>
</div>
<div class="form-group">
<div class="col-md-12">
<label class="control-label popup-label">Last Name</label>
<input required type="text" class="form-control" name="lastname" value="">
</div>
</div>
<div id="error">
<div class="alert alert-danger"> <strong>Error!</strong> There Are Too Many Errors</div>
</div>
</div>
<div class="modal-footer">
<button type="submit" class="btn btn-primary" id="submitForm">Submit</button>
<button type="button" class="btn btn-default" data-dismiss="modal" id="reset">Cancel / Clear</button>
</div>
</form>
</div>
</div>
</div>
</div>
<div id="thanks"></div>
Ajax to submit form
Ajax 提交表单
$("#submitForm").click(function () {
$.ajax({
type: "POST",
url: "process.php",
data: $('#myform').serialize(),
success: function (msg) {
$("#thanks").html(msg)
$("#myModal").modal('hide');
},
error: function () {
$("#error").show();
}
});
});
Assuming that server-side language is PHP
假设服务端语言是PHP
<?php
if (isset($_POST['firstname'])) {
$firstname = strip_tags($_POST['firstname']);
$lastname = strip_tags($_POST['lastname']);
//Do what ever you like to do next
echo "<div class=\"alert alert-success\"><strong>Success!</strong> This Is Success Thanks Message. If everything go exactly as Planned.</div>";
}
?>
Till here, Form values has been posted.
到这里，表单值已经发布。
2. If successfully submitted, the alert-success message will display.
2. 如果提交成功，将会显示成功提示信息。
success: function (msg) {
$("#thanks").html(msg)
},
After successfull call from Ajax, the success message will display;
Ajax调用成功后，会显示成功信息；
<div id="thanks"></div>
It's up to you If you wana put <div id="thanks"></div>inside modal body but I won't recommend it because the next step you asked is to auto close the modal so success message will only show for couple of seconds and modal gets closed.
这取决于您如果您想放入<div id="thanks"></div>模态主体但我不会推荐它，因为您要求的下一步是自动关闭模态，因此成功消息只会显示几秒钟并且模态会关闭。
3. If the alert-success displays, I'd like to have the modal window close
3.如果显示alert-success，我想关闭模态窗口
After successful call from Ajax this will auto close the modal
从 Ajax 成功调用后，这将自动关闭模态
success: function (msg) {
$("#thanks").html(msg)
$("#myModal").modal('hide');
},
4. (optionally) I'd like to reset the form
4.（可选）我想重置表格
After Successful Ajax call, Once the modal has been closed, following code will reset the form inputs if modal open again.
成功调用 Ajax 后，一旦模态关闭，如果模态再次打开，以下代码将重置表单输入。
$('#myModal').on('hidden.bs.modal', function(){
//$(this).removeData('bs.modal');
$(':input','#myform').val("");
});
Optionally If user put values in form and close the modal without posting it, following code can also reset the form if user open the modal again, cancel/clearbutton has id resetwhich is bind with the following code.
可选如果用户将值放入表单并关闭模态而不发布它，如果用户再次打开模态，以下代码也可以重置表单，cancel/clear按钮具有reset与以下代码绑定的id 。
$("#reset").click(function () {
$(':input','#myform').val("");
});
The last thing, make sure the complete JS code will be DOM ready
最后一件事，确保完整的 JS 代码已准备好 DOM
$(document).ready(function () {
//Put JS code here
});
In your attempt;
在你的尝试中；
$(document).ready(function(){
if($('#alert-success')){
$('#myModal').hide(); <<<<----This is wrong
}
});
When closing modal with jQuery (not with bootstrap) should be like
使用 jQuery（而不是引导程序）关闭模态时应该像
$('#myModal').hide('hide'); <<<<----Correct
回答by Antony Vilson
You Could sleep for Sometime and then Redirect as below.
你可以睡一会儿，然后重定向如下。
This Should be executed after Luanching modal.
这应该是在 Luanching modal 之后执行的。
Create a javascript function as below
创建一个javascript函数，如下所示
function sleep (time) {
return new Promise((resolve) => setTimeout(resolve, time));
}
Then Sleep and Redirect (Sleeping is just for showing the Success Alert)
然后睡眠和重定向（睡眠只是为了显示成功警报）
sleep(3000).then(() => {window.location.href = 'index.jsp';});
regards, Antony Vilson
问候，安东尼·维尔森
