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

【问题标题】：Close Bootstrap modal on form submit在表单提交时关闭引导模式
【发布时间】：2016-02-02 08:30:51
【问题描述】：

我有一个包含表单的引导模式对话框。模态对话框包含一个提交和一个取消按钮。现在在submit 按钮上单击表单已成功提交，但模式对话框没有关闭。这是我的 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>

有人知道怎么做吗？

【问题讨论】：

标签： javascript html jquery bootstrap-modal

【解决方案1】：

提供 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>

希望这会有所帮助。

【讨论】：

@Lara 在点击事件中出现吗？
不，甚至点击事件也没有得到
它很大..我发布的相关 html
@Lara 我发布了另一个答案.. 试试吧
让我们continue this discussion in chat.

【解决方案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;
});

【讨论】：

哪一个？ css 选择器是否正确？答案中的任何一个建议都应该有效。
这确实关闭了模态对话框，但在我的情况下不会触发要提交的模态中的内部表单。
只是在按钮上添加data-dismiss不会提交。
添加 data-dismiss 会导致模式在提交之前关闭并阻止提交。所以这并不能解决问题。这里给出的 jQuery 与接受的答案相同——如果一个人读取了所有的 cmets——但它更容易复制。
如果按钮的类型是'button'，那么你可以submit()然后data-dismiss。

【解决方案3】：

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

1) 将 data-dismiss 添加到提交按钮，即

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

【讨论】：

“像在 JS 中那样做”...最好说“在 JQuery 中”
在提交时添加数据关闭确实会关闭模式，但它会阻止将对象保存到数据库。

【解决方案4】：

使用该代码

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

【讨论】：

这几乎是正确的，但是不要从事件处理函数中返回 false，因为这与在事件对象上调用 preventDefault() 和 stopPropagation() 相同。调用preventDefault() 会阻止提交的发生，这不是这里想要的结果。这也是为什么 data-dismiss 属性不起作用的原因——引导模式 js 添加的事件也会在事件上调用 preventDefault()。
#button 应该是表单的 id，而不是按钮（参见 link 顶部的注释） - 如果在按钮上使用事件，请使用点击事件。
还可以考虑调用.modal('hide');而不是'toggle'，否则如果您的表单也可以在模态不可见的情况下提交，则在触发提交事件时将显示模态。
答案已在您的 cmets 视图中更新。如果有什么遗漏，请与我分享。谢谢
@othp 你能按照你建议的方式编辑代码吗？就像现在一样，它似乎不包括你所有的 cmets，我也不完全确定自己该怎么做

【解决方案5】：

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

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

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

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

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

【讨论】：

我尝试过，我搜索过，但你的概念是独一无二的，迄今为止最适合我。非常感谢

【解决方案6】：

在 javascript 中添加 data-dismiss="modal" 或使用 $("#modal").modal("hide") 都不适合我。当然他们关闭了模式，但也没有发送 ajax 请求。

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

【讨论】：

【解决方案7】：

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

export class HelloComponent implements OnInit {

@ViewChild('fileInput') fileInput:ElementRef;

在关闭按钮中添加 #fileInput

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

当你想以编程方式关闭模式时，触发关闭按钮上的点击事件

this.fileInput.nativeElement.click();

【讨论】：

请不要发帖duplicate answers。如果问题是重复的，则标记为将它们关闭为重复。

【解决方案8】：

如果 AJAX 表单提交的结果在模态结束关闭之前影响了模态范围之外的 HTML，则列出的答案将不起作用。在我的例子中，结果是一个灰显（淡出）的屏幕，我可以在其中看到页面更新，但无法与任何页面元素交互。

我的解决方案：

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

注意：我的模态表单位于已通过 AJAX 呈现的父 div 中，因此需要将事件侦听器锚定到文档。

【讨论】：

【解决方案9】：

试试这个代码

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

【讨论】：

【解决方案10】：

我也在使用 rails 和 ajax，我也遇到了同样的问题。运行这段代码

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

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

【讨论】：

【解决方案11】：

我遇到了同样的问题，终于用这段代码解决了：

<%=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>

所选答案对我不起作用。

【讨论】：

【解决方案12】：

使用它来同时提交和关闭模态

$('#form-submit').on('click', function(e){
    e.preventDefault();
    $('#con-close-modal').modal('toggle'); //or  $('#IDModal').modal('hide');
    $('#date-form').submit();
});

【讨论】：

【解决方案13】：

如果您不想使用 jQuery，请将按钮类型设为普通按钮并添加指向您要执行的函数的单击侦听器，并将表单作为参数发送。按钮如下：

<button (click)="yourSubmitFunction(yourForm)" [disabled]="!yourForm.valid" type="button" class="btn btn-primary" data-dismiss="modal">Save changes</button>

如果您使用此方法，请记住从表单 div 中删除：(ngSubmit)="yourSubmitFunction(yourForm)"。

【讨论】：

【解决方案14】：

这对我有用。我在提交按钮中嵌入了一个内联 JavaScript 代码，以便在提交时自动单击关闭按钮。我使用关闭按钮的 ID 从 javascript (jQuery) 中引用它。

<button type="submit" class="btn btn-success float-right" onclick="javascript: $('#close-button').click();">Save</button>

【讨论】：

它确实使模式变得混乱，但整个页面变得无法点击。

【解决方案15】：

如果有人不想使用 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>

【讨论】：

【解决方案16】：

我所做的是按下关闭按钮，该按钮会自动将模式带到满意地满足请求的那一刻。这是我当时想出的，它对我有用，我正在使用 laravel 和 axios

我在模式的关闭按钮中添加了一个 ID，然后我选择了按钮并在响应正确时执行

document.getElementById("closeGroup").click();

【讨论】：

"请勿发布代码、数据、错误消息等的图像 - 将文本复制或键入到帖子中。请保留将图像用于图表或演示渲染错误，这是不可能的事情通过文字准确描述。