Javascript 在表单提交上关闭 Bootstrap 模态

Close Bootstrap Modal On form Submit

提问by Lara

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..

我有一个包含 form 的 Bootstrap 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..

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

采纳答案by Muhammad Fahad

Use that Code

使用该代码

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

回答by martincarlin87

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;
});

回答by Kandarp

give id to submit button

给 id 提交按钮

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

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

Also you forgot to close last div.

你也忘了关闭最后一个 div。

</div>

Hope this helps.

希望这可以帮助。

回答by Mō I?????

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');
});

回答by Abhi

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 的解决方案，请告诉我们

回答by Hindreen

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 的情况下修复它。

回答by tomb

I had the same problem and finally got it working with this code:

我遇到了同样的问题，终于用这段代码让它工作了：

<%=form_with id: :friend_email_form, url: friend_emails_create_path do |f|%>

                      # form fields entered here

<div class="actions">
    <%= f.submit "Send Email", class: 'btn btn-primary', "onclick":"submit_form();", "data-dismiss":"modal"%>
</div>

 <script>
    function submit_form() {
      document.getElementById('friend_email_form').submit();
    }
</script>

The selected answer did not work for me.

所选答案对我不起作用。

回答by EJAg

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.

在 javascript 中添加data-dismiss="modal"和使用都不$("#modal").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​​）。我也必须"modal-open"从 body 标签中删除类。这基本上重置了模态。我认为类似的事情，在成功的 ajax 请求后回调以删除和添加模式也应该在其他框架中工作。

回答by Fernando Siqueira

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();

回答by Devon Luongo

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 中，因此需要将事件侦听器锚定到文档。