关闭Bootstrap模式在表单上提交

I have a Bootstrap Modal which contains form . The Modal also Contains , Submit and Cancel Button. Now as per my requirement , on Submit Button Click of the Modal , Form is Submitting Successfully but Modal is Not getting closed..Here is my HTML..

我有一个包含表单的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>

How to do it ..Please help me ..Thanks..

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

10 个解决方案

#1

Use that Code

使用该代码

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

#2

Add the same attribute as you have on the Close button:

在“关闭”按钮上添加相同的属性：

data-dismiss="modal"

e.g.

例如

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

You can also use jQuery if you wish:

如果您愿意，也可以使用jQuery：

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

    // submission stuff

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

#3

give id to submit button

给id提交按钮

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

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

Also you forgot to close last div.

你忘了关闭最后一个div。

</div>

Hope this helps.

希望这可以帮助。

#4

You can use one of this two options:

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

1) Add data-dismiss to the submit button i.e.

1）将数据解除添加到提交按钮，即

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

2) Do it in JS like

2）在JS中做它

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

#5

i make this code it work fine but once form submit model button not open model again say e.preventdefault is not a function..

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

Use below code on any event that fire on submit form

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

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

you can make this code more short..

你可以让这段代码变得更短

if any body found solution for e.preventdefault let us know

如果有任何机构找到e.preventdefault的解决方案，请告诉我们

#6

Neither adding data-dismiss="modal" nor using $("#modal").modal("hide") in javascript worked for me. Sure they closed the modal but the ajax request is not sent either.

既没有添加data-dismiss =“modal”也没有使用$（“＃modal”）。javascript中的modal（“hide”）为我工作。当然他们关闭了模态，但也没有发送ajax请求。

Instead, I rendered the partial containing the modals again after ajax is successful (I'm using ruby on rails). I also had to remove "modal-open" class from the body tag too. This basically resets the modals. I think something similar, with a callback upon successful ajax request to remove and add back the modals should work in other framework too.

相反，我在ajax成功后再次渲染包含模态的部分（我在rails上使用ruby）。我还必须从body标签中删除“modal-open”类。这基本上重置了模态。我认为类似的东西，成功的ajax请求回调和添加回模态的回调也应该在其他框架中工作。

#7

if your modal has a cancel button (Otherwise create a hidden close button). You can simulate the click event on this button so that your form is closed. Iin your component add a ViewChild

如果你的模态有一个取消按钮（否则创建一个隐藏的关闭按钮）。您可以在此按钮上模拟单击事件，以便关闭表单。在您的组件中添加ViewChild

export class HelloComponent implements OnInit {

@ViewChild('fileInput') fileInput:ElementRef;

in your close button add #fileInput

在关闭按钮中添加#fileInput

<button class="btn btn-danger" #fileInput id="delete-node" name="button" data-dismiss="modal" type="submit">Cancelar</button>

When you want to close the modal programmatically trigger an click event on the close button

如果要以编程方式关闭模式，请在关闭按钮上触发单击事件

this.fileInput.nativeElement.click();

#8

The listed answers won't work if the results of the AJAX form submit affects the HTML outside the scope of the modal before the modal finishes closing. In my case, the result was a grayed out (fade) screen where I could see the page update, but could not interact with any of the page elements.

如果AJAX表单提交的结果在模式完成关闭之前影响模式范围之外的HTML，则列出的答案将不起作用。在我的情况下，结果是一个灰色（淡入淡出）屏幕，我可以看到页面更新，但无法与任何页面元素进行交互。

My solution:

我的解决方案

$(document).on("click", "#send-email-submit-button", function(e){
    $('#send-new-email-modal').modal('hide')
});

 $(document).on("submit", "#send-email-form", function(e){
    e.preventDefault();
    var querystring = $(this).serialize();
    $.ajax({
        type: "POST",
        url: "sendEmailMessage",
        data : querystring,
        success : function(response) {
            $('#send-new-email-modal').on('hidden.bs.modal', function () {
                $('#contacts-render-target').html(response);
            }
    });
    return false;
});

Note: My modal form was inside a parent div that was already rendered via AJAX, thus the need to anchor the event listener to document.

注意：我的模态形式在已经通过AJAX呈现的父div内，因此需要将事件监听器锚定到文档。

#9

Try this code

试试这个代码

$('#frmStudent').on('submit', function() {
  $(#StudentModal).on('hide.bs.modal', function (e) {
    e.preventDefault();
  })
});

#10

I am using rails and ajax too and I had the same problem. just run this code

我也使用rails和ajax，我遇到了同样的问题。只需运行此代码

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

that worked for me but I am trying to also fix it without using jQuery.

这对我有用，但我试图在不使用jQuery的情况下修复它。

#1