Bootstrap 模式在表单提交成功后打开，但在单击“关闭”按钮时不会保持关闭状态答案

【问题标题】：Bootstrap modal opens upon successful form submit, but will not stay closed when "Close" button clickedBootstrap 模式在表单提交成功后打开，但在单击“关闭”按钮时不会保持关闭状态
【发布时间】：2015-05-06 05:19:26
【问题描述】：

我有一个联系表单，当成功提交时，会打开一个引导模式，让用户知道发送成功。成功后打开就好了，但是当我单击关闭时，它不会保持关闭状态。一两秒钟后，它再次打开并提交另一个表单/消息。请看下面的代码。我在某处循环，并认为我在某处缺少“return”或“preventDefault()”。谢谢！

$(document).ready(function() {    

$(function() {

// Get the form.
var form = $('#ajax-contact');

// Get the messages div.
//var formMessages = $('#form-messages');

$('#successModal').modal({
    show: false
});

$('#errorModal').modal({
    show: false
});

// Set up an event listener for the contact form.
$("button").click(function(e) {

    // Stop the browser from submitting the form.
    e.preventDefault(e);

    // Serialize the form data.
    var formData = $(form).serialize();

    // Submit the form using AJAX.
    $.ajax({
        type: 'POST',
        url: $(form).attr('action'),
        data: formData,
        success: function(result){
            $('#contact-name').val('');
            $('#contact-email').val('');
            $('#contact-website').val('');
            $('#contact-message').val('');

            $('#successModal').modal({
                show: true
            });

        },
        error: function(xhr,status,error){
            //$('#errorModal').modal('show')
        }


    });



});



});



});

【问题讨论】：

标签： jquery html forms twitter-bootstrap bootstrap-modal

【解决方案1】：

你的成功函数调用它来显示模式，而不是关闭它。：

    $('#successModal').modal({
            show: true
        });

如果你想让它在成功时关闭它，你可以使用它来代替

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

或者您也可以将其添加到您的提交按钮。

data-dismiss="modal"

我不知道你为什么这么叫：

 $('#successModal').modal({
show: false
});

【讨论】：

我读到首先需要初始化模态，所以这是最后一部分出现的地方。但我明白你的意思，这没有必要。 “隐藏”是个好主意，但如果我“显示”然后在它闪烁模态后立即“隐藏”。不确定添加 data-dismiss 是否有效，因为显示模式不依赖于单击提交，而是依赖于帖子的成功，除非我不理解某些东西。模式是在成功后保持打开状态直到用户关闭，问题是当我关闭它时它会自动重新打开并提交另一个 ajax 请求。谢谢！
我想通了，必须给我的“提交”按钮一个单独的 ID。在答案中发布我认为发生的事情。

【解决方案2】：

所以我相信我想通了。我开始 ajax POST 过程的点击事件是抓取“按钮”，模式中的“关闭”也是一个“按钮”，所以当我点击它时，它再次通过 Javascript 运行。我在我的表单上给了我的“提交”按钮一个单独的 id，在我的 Javascript 文件中更改了它，现在它工作得很好。不敢相信就这么简单。

【讨论】：