[英]close boostrap modal when form is submitted
我已经看过像一些例子这样 ,但回答有把data-dismiss="modal"
提交按钮。 但是,它不处理该表格。 它只是关闭模态。
提交表单后,如何关闭它?
这是我的模态形式
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">
<div class="modal-dialog" role="document">
<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" id="exampleModalLabel">New message</h4>
</div>
<form role="form" id="contact-form" method="post">
<div class="modal-body">
<div class="form-group">
<label for="recipient-name" class="control-label">Your name:</label>
<input name="name" required="" type="text" class="form-control" id="recipient-name"/>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="submit" class="btn btn-primary">Submit now</button>
</div>
</form>
</div>
</div>
</div>
这个为我工作
$('#contact-form').on('submit', function() {
$('#exampleModal').modal('hide');
});
提交表单时,消除表单模式的一种方法是通过xhr
或使用Javascript回调来触发关闭。
您需要加载Bootstrap javascript才能进行这些调用,但是链接的文档页面上有很多示例。 对于您的特定示例,尝试启动模式后,请尝试在浏览器的开发工具控制台中运行此命令:
$('#exampleModal').modal('hide');
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.