繁体   English   中英

提交表格时关闭Boostrap模式

[英]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">&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>

这个为我工作

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

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

您需要加载Bootstrap javascript才能进行这些调用,但是链接的文档页面上有很多示例。 对于您的特定示例,尝试启动模式后,请尝试在浏览器的开发工具控制台中运行此命令:

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

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM