blocks|key|4456779|text|将id提供给提交按钮|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4456780|<button+id="btnSave"+type="submit"+class="btn+btn-success"><i+class="glyphicon+glyphicon-trash"></i>+Save</button>

$('#btnSave').click(function()+{
+++$('#StudentModal').modal('hide');
});|code-block|syntax|javascript|4456781|此外，您还忘记关闭上一个div。|4456782|</div>|4456783|希望这能有所帮助。|4456784|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|Q|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|R|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|S|8|@]|9|@]|A|$]]|$1|M|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|N|$]]

<p>give id to submit button</p>

<pre><code>&lt;button id="btnSave" type="submit" class="btn btn-success"&gt;&lt;i class="glyphicon glyphicon-trash"&gt;&lt;/i&gt; Save&lt;/button&gt;

$('#btnSave').click(function() {
   $('#StudentModal').modal('hide');
});
</code></pre>

<p>Also you forgot to close last div.</p>

<pre><code>&lt;/div&gt;
</code></pre>

<p>Hope this helps.</p>


blocks|key|4456804|text|添加与关闭按钮上相同的属性：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4456805|data-dismiss="modal"|code-block|syntax|javascript|4456806|例如：|4456807|<button+type="submit"+class="btn+btn-success"+data-dismiss="modal"><i+class="glyphicon+glyphicon-ok"></i>+Save</button>|4456808|如果您愿意，也可以使用jQuery：|4456809|$('#frmStudent').submit(function()+{

++++//+submission+stuff

++++$('#StudentModal').modal('hide');
++++return+false;
});|4456810|entityMap^0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|R|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|S|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|T|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|U|8|@]|9|@]|A|$]]|$1|M|3|N|5|D|7|V|8|@]|9|@]|A|$E|F]]|$1|O|3|-4|5|6|7|W|8|@]|9|@]|A|$]]]|P|$]]

<p>Add the same attribute as you have on the Close button:</p>

<pre><code>data-dismiss="modal"
</code></pre>

<p>e.g.</p>

<pre><code>&lt;button type="submit" class="btn btn-success" data-dismiss="modal"&gt;&lt;i class="glyphicon glyphicon-ok"&gt;&lt;/i&gt; Save&lt;/button&gt;
</code></pre>

<p>You can also use jQuery if you wish:</p>

<pre><code>$('#frmStudent').submit(function() {

    // submission stuff

    $('#StudentModal').modal('hide');
    return false;
});
</code></pre>


blocks|key|4456769|text|您可以使用以下两个选项之一：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4456770|1)向提交按钮添加数据解除，即|4456771|<button+type="submit"+class="btn+btn-success"+data-dismiss="modal"><i+class="glyphicon+glyphicon-ok"></i>+Save</button>|code-block|syntax|javascript|4456772|2)在JS中做，像这样|4456773|$('#frmStudent').submit(function()+{
++++$('#StudentModal').modal('hide');
});|4456774|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|P|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|Q|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|R|8|@]|9|@]|A|$]]|$1|K|3|L|5|F|7|S|8|@]|9|@]|A|$G|H]]|$1|M|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|N|$]]

<p>You can use one of this two options:</p>

<p>1) Add data-dismiss to the submit button i.e.</p>

<pre><code>&lt;button type="submit" class="btn btn-success" data-dismiss="modal"&gt;&lt;i class="glyphicon glyphicon-ok"&gt;&lt;/i&gt; Save&lt;/button&gt;
</code></pre>

<p>2) Do it in JS like</p>

<pre><code>$('#frmStudent').submit(function() {
    $('#StudentModal').modal('hide');
});
</code></pre>


blocks|key|4456853|text|使用该代码|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4456854|+$('#button').submit(function(e)+{
++++e.preventDefault();
++++//+Coding
++++$('#IDModal').modal('toggle');+//or++$('#IDModal').modal('hide');
++++return+false;
});|code-block|syntax|javascript|4456855|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>Use that Code</p>

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


blocks|key|4456859|text|我让这段代码工作得很好，但是一旦表单提交模型按钮不再打开模型，就会说e.preventdefault不是一个函数..|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4456860|在提交表单时触发的任何事件上使用以下代码|4456861|++++++++++++++++$('.modal').removeClass('in');
++++++++++++++++$('.modal').attr("aria-hidden","true");
++++++++++++++++$('.modal').css("display",+"none");
++++++++++++++++$('.modal-backdrop').remove();
++++++++++++++++$('body').removeClass('modal-open');|code-block|syntax|javascript|4456862|您可以使此代码更简短。|4456863|如果有人找到了e.preventdefault的解决方案，请让我们知道|4456864|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|P|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|Q|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|R|8|@]|9|@]|A|$]]|$1|K|3|L|5|6|7|S|8|@]|9|@]|A|$]]|$1|M|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|N|$]]

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

<p>Use below code on any event that fire on submit form</p>

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

<p>you can make this code more short..</p>

<p>if any body found solution for e.preventdefault  let us know</p>


blocks|key|4456946|text|在javascript中添加data-dismiss="modal"和使用$("#modal").modal("hide")对我来说都不起作用。当然，他们关闭了模式，但是ajax请求也没有发送。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|4456947|相反，在ajax成功之后，我再次呈现了包含模态的部分(我使用的是ruby+on+rails)。我还必须从body标记中删除"modal-open"类。这基本上重置了模态。我认为类似的东西，通过一个成功的ajax请求的回调来移除和添加回通道，应该也可以在其他框架中工作。|4456948|entityMap^0|E|K|11|P|0|1P|C|0^^$0|@$1|2|3|4|5|6|7|J|8|@$9|K|A|L|B|C]|$9|M|A|N|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|O|8|@$9|P|A|Q|B|C]]|D|@]|E|$]]|$1|H|3|-4|5|6|7|R|8|@]|D|@]|E|$]]]|I|$]]

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

<p>Instead, I rendered the partial containing the modals again after ajax is successful (I'm using ruby on rails). I also had to remove <code>"modal-open"</code> 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.</p>


blocks|key|4457014|text|如果AJAX表单提交的结果在模式关闭之前影响模式作用域之外的HTML，则列出的答案将不起作用。在我的例子中，结果是一个灰屏(淡入淡出)，我可以在其中看到页面更新，但不能与任何页面元素交互。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4457015|我的解决方案是：|4457016|$(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;
});|code-block|syntax|javascript|4457017|注意:我的模式表单位于已经通过AJAX呈现的父div中，因此需要将事件侦听器锚定到文档。|4457018|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|N|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|O|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|P|8|@]|9|@]|A|$]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

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

<p>My solution:</p>

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

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


blocks|key|4457035|text|试试这段代码|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4457036|$('#frmStudent').on('submit',+function()+{
++$(#StudentModal).on('hide.bs.modal',+function+(e)+{
++++e.preventDefault();
++})
});|code-block|syntax|javascript|4457037|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>Try this code</p>

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


blocks|key|4457068|text|我也在使用rails和ajax，我也遇到了同样的问题。只需运行此代码|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4457069|+$('#modalName').modal('hide');|code-block|syntax|javascript|4457070|这对我来说很有效，但我也在尝试不使用jQuery来修复它。|4457071|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

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

<pre><code> $('#modalName').modal('hide');
</code></pre>

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


blocks|key|4457116|text|我也遇到了同样的问题，最后用下面的代码解决了这个问题：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4457117|<%25=form_with+id:+:friend_email_form,+url:+friend_emails_create_path+do+%7Cf%7C%25>

++++++++++++++++++++++#+form+fields+entered+here

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

+<script>
++++function+submit_form()+{
++++++document.getElementById('friend_email_form').submit();
++++}
</script>|code-block|syntax|javascript|4457118|选择的答案对我不起作用。|4457119|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

<p>I had the same problem and finally got it working with this code:</p>

<pre><code>&lt;%=form_with id: :friend_email_form, url: friend_emails_create_path do |f|%&gt;

                      # form fields entered here

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

 &lt;script&gt;
    function submit_form() {
      document.getElementById('friend_email_form').submit();
    }
&lt;/script&gt;
</code></pre>

<p>The selected answer did not work for me.</p>


blocks|key|4457156|text|使用此选项可同时提交并关闭模式|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4457157|$('#form-submit').on('click',+function(e){
++++e.preventDefault();
++++$('#con-close-modal').modal('toggle');+//or++$('#IDModal').modal('hide');
++++$('#date-form').submit();
});|code-block|syntax|javascript|4457158|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>Use this to submit and close the modal at the same time</p>

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


blocks|key|4457222|text|如果不想使用jQuery，请将按钮类型设置为普通按钮，并添加一个单击侦听器，指向要执行的函数，然后将表单作为参数发送。该按钮如下所示：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4457223|<button+(click)="yourSubmitFunction(yourForm)"+[disabled]="!yourForm.valid"+type="button"+class="btn+btn-primary"+data-dismiss="modal">Save+changes</button>|offset|length|style|CODE|4457224|如果使用此方法，请记住从form+div中删除：(ngSubmit)="yourSubmitFunction(yourForm)"。|4457225|entityMap^0|0|0|4C|0|O|15|0^^$0|@$1|2|3|4|5|6|7|L|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|M|8|@$D|N|E|O|F|G]]|9|@]|A|$]]|$1|H|3|I|5|6|7|P|8|@$D|Q|E|R|F|G]]|9|@]|A|$]]|$1|J|3|-4|5|6|7|S|8|@]|9|@]|A|$]]]|K|$]]

<p>If you do not want to use jQuery, make the button type a normal button and add a click listener pointing to the function you would like to execute, and send the form in as a parameter. The button would be as follows:</p>
<p><code>&lt;button (click)=&quot;yourSubmitFunction(yourForm)&quot; [disabled]=&quot;!yourForm.valid&quot; type=&quot;button&quot; class=&quot;btn btn-primary&quot; data-dismiss=&quot;modal&quot;&gt;Save changes&lt;/button&gt;</code></p>
<p>Remember to remove: <code>(ngSubmit)=&quot;yourSubmitFunction(yourForm)&quot;</code> from the form div if you use this method.</p>


blocks|key|4457249|text|这对我很有效。我在submit按钮中嵌入了一个内联JavaScript代码，以便在提交时自动单击close按钮。我使用close按钮的ID从javascript+(jQuery)引用它。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4457250|<button+type="submit"+class="btn+btn-success+float-right"+onclick="javascript:+$('#close-button').click();">Save</button>|code-block|syntax|javascript|4457251|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>This worked for me. I embedded an inline JavaScript code in the submit button to auto-click the close button on submit. I used the ID of the close button to reference it from the javascript (jQuery).</p>
<pre><code>&lt;button type=&quot;submit&quot; class=&quot;btn btn-success float-right&quot; onclick=&quot;javascript: $('#close-button').click();&quot;&gt;Save&lt;/button&gt;
</code></pre>


blocks|key|4457281|text|我所做的是按下关闭按钮，它会自动将模式带到请求令人满意的时刻，这是我当时想出的，它对我有效，我正在使用laravel+fulfilled.was+axios|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4457282|我在modal的close按钮中添加了一个ID，并在选择按钮后，在响应正确时执行|4457283|document.getElementById("closeGroup").click();|code-block|syntax|javascript|4457284|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|L|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|M|8|@]|9|@]|A|$G|H]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

<p>What I do is press the close button that automatically brings the modal to the moment the request is satisfactorily fulfilled.was what I came up with at that time and it worked for me, I am using laravel with axios</p>
<p>i add an ID in the close button of modal and after i select the buttton
and execute when the response is correct</p>
<pre><code>document.getElementById(&quot;closeGroup&quot;).click();
</code></pre>


<p>I have a Bootstrap modal dialog which contains a form. The modal dialog contains a submit and a cancel button. Now on <code>submit</code> button click the form is submitted successfully but the modal dialog isn't getting closed. Here is my HTML:</p>
<pre><code>&lt;div class=&quot;modal fade&quot; id=&quot;StudentModal&quot; tabindex=&quot;-1&quot; role=&quot;dialog&quot; aria-labelledby=&quot;StudentModalLabel&quot; aria-hidden=&quot;true&quot; data-backdrop=&quot;static&quot;&gt;
   &lt;div class=&quot;modal-dialog&quot;&gt;
      &lt;div class=&quot;modal-content&quot;&gt;
         &lt;form action=&quot;~/GetStudent&quot; class=&quot;form-horizontal&quot; role=&quot;form&quot; method=&quot;post&quot; id=&quot;frmStudent&quot;&gt;
            &lt;div class=&quot;modal-footer&quot;&gt;
               &lt;div class=&quot;pull-right&quot;&gt;
                  &lt;button type=&quot;submit&quot; class=&quot;btn btn-success&quot;&gt;&lt;i class=&quot;glyphicon glyphicon-ok&quot;&gt;&lt;/i&gt; Save&lt;/button&gt;
                  &lt;button type=&quot;button&quot; class=&quot;btn btn-danger&quot; data-dismiss=&quot;modal&quot;&gt;&lt;i class=&quot;glyphicon glyphicon-remove&quot;&gt;&lt;/i&gt; Close&lt;/button&gt;
               &lt;/div&gt;
            &lt;/div&gt;
         &lt;/form&gt;
      &lt;/div&gt;
   &lt;/div&gt;
</code></pre>
<p>Anybody knows how to do this?</p>


Close Bootstrap modal on form submit

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

我有一个包含表单的Bootstrap模式对话框。模式对话框包含一个提交和一个取消按钮。现在点击submit按钮，表单提交成功，但模式对话框不会关闭。这是我的HTML：<div class="modal fade" id="StudentModal" tabindex="-1" role="dialog" aria-la...

问表单提交时关闭Bootstrap模式
EN

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问表单提交时关闭Bootstrap模式EN

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问表单提交时关闭Bootstrap模式
EN