关闭Bootstrap Modal在表单上提交

Question

我有一个包含表单的Bootstrap Modal.Modal还包含,提交和取消按钮.现在根据我的要求,在提交按钮单击模态,表单正在成功提交但模态未关闭..这是我的HTML ..

<div class="modal fade" id="StudentModal" tabindex="-1" role="dialog" aria-labelledby="StudentModalLabel" aria-hidden="true" data-backdrop="static">
   <div class="modal-dialog">
      <div class="modal-content">
         <form action="~/GetStudent" class="form-horizontal" role="form" method="post" id="frmStudent">
            <div class="modal-footer">
               <div class="pull-right">
                  <button type="submit" class="btn btn-success"><i class="glyphicon glyphicon-ok"></i> Save</button>
                  <button type="button" class="btn btn-danger" data-dismiss="modal"><i class="glyphicon glyphicon-remove"></i> Close</button>
               </div>
            </div>
         </form>
      </div>
   </div>

怎么做..请帮帮我..谢谢..

Answer 1

使用该代码

 $('#button').submit(function(e) {
    e.preventDefault();
    // Coding
    $('#IDModal').modal('toggle'); //or  $('#IDModal').modal('hide');
    return false;
});

Answer 2

在"关闭"按钮上添加相同的属性:

data-dismiss="modal"

例如

<button type="submit" class="btn btn-success" data-dismiss="modal"><i class="glyphicon glyphicon-ok"></i> Save</button>

如果您愿意,也可以使用jQuery:

$('#frmStudent').submit(function() {

    // submission stuff

    $('#StudentModal').modal('hide');
    return false;
});

Answer 3

给id提交按钮

<button id="btnSave" type="submit" class="btn btn-success"><i class="glyphicon glyphicon-trash"></i> Save</button>

$('#btnSave').click(function() {
   $('#StudentModal').modal('hide');
});

你忘了关闭最后一个div.

</div>

希望这可以帮助.

Answer 4

如果有人不想使用 jQuery，在 Bootsrap 5.0 中，您现在应该使用data-bs-dismmis，例如：

<button type="submit" class="btn btn-success" data-bs-dismiss="modal">SUBMIT</button>

或者

<button type="button" class="btn btn-success" onclick="submitForm()" data-bs-dismiss="modal">SUBMIT</button>

Answer 5

您可以使用以下两个选项之一：

1）在提交按钮上添加数据关闭即

<button type="submit" class="btn btn-success" data-dismiss="modal"><i class="glyphicon glyphicon-ok"></i> Save</button>

2）用JS做

$('#frmStudent').submit(function() {
    $('#StudentModal').modal('hide');
});

Answer 6

我使这段代码工作正常，但是一旦表单提交模型按钮不再打开模型，就会说 e.preventdefault 不是一个函数。

在提交表单上触发的任何事件上使用以下代码

                $('.modal').removeClass('in');
                $('.modal').attr("aria-hidden","true");
                $('.modal').css("display", "none");
                $('.modal-backdrop').remove();
                $('body').removeClass('modal-open');

你可以让这段代码更短..

如果有人找到 e.preventdefault 的解决方案，请告诉我们