这个答案只是一个例子,让 COMPLETE 知道如何实现,OP 提出的问题。
1.提交嵌入模式中的表单。
带有 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 提交表单
$("#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();
}
});
});
假设服务器端语言是 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>";
}
?>
至此,表单值已发布。
2。如果提交成功,将显示警报成功消息。
success: function (msg) {
$("#thanks").html(msg)
},
Ajax调用成功后,会显示成功消息;
<div id="thanks"></div>
这取决于你如果你想把<div id="thanks"></div> 放在模态正文中,但我不会推荐它,因为你要求的下一步是自动关闭模态,所以成功消息只会显示几秒钟,模态就会关闭.
3.如果显示警报成功,我想关闭模式窗口
从 Ajax 成功调用后,这将自动关闭模式
success: function (msg) {
$("#thanks").html(msg)
$("#myModal").modal('hide');
},
4. (可选)我想重置表单
Ajax 调用成功后,一旦模态框关闭,如果模态框再次打开,以下代码将重置表单输入。
$('#myModal').on('hidden.bs.modal', function(){
//$(this).removeData('bs.modal');
$(':input','#myform').val("");
});
可选地,如果用户将值放入表单并关闭模态而不发布它,如果用户再次打开模态,以下代码也可以重置表单,cancel/clear 按钮的 id reset 与以下代码绑定。
$("#reset").click(function () {
$(':input','#myform').val("");
});
最后一件事,确保完整的 JS 代码已经准备好 DOM
$(document).ready(function () {
//Put JS code here
});
Fiddle Example
在你的尝试中;
$(document).ready(function(){
if($('#alert-success')){
$('#myModal').hide(); <<<<----This is wrong
}
});
当使用 jQuery(而不是引导程序)关闭模式时应该像
$('#myModal').hide('hide'); <<<<----Correct