提交表单时关闭引导模式答案

【问题标题】：close boostrap modal when form is submitted提交表单时关闭引导模式
【发布时间】：2015-09-10 13:10:58
【问题描述】：

我看过一些像 this 这样的例子，但答案是把 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">&times;</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>

【问题讨论】：

标签： javascript twitter-bootstrap

【解决方案1】：

这个为我工作

$('#contact-form').on('submit', function() {
    $('#exampleModal').modal('hide');
});

【讨论】：

【解决方案2】：

在提交时解除表单模式的一种方法是通过xhr 或使用 Javascript 回调来触发解除。

您需要加载Bootstrap javascript 才能进行这些调用，但链接的文档页面上有很多示例。对于您的具体示例，当您启动模式时，请尝试在浏览器的开发工具控制台中运行它：

$('#exampleModal').modal('hide');

【讨论】：