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

  • Z时代
  • 2024-01-10
  • 分类：问答

我有一个联系表单，当提交成功时，会打开一个让用户知道发送成功的Bootstrap模式。它在成功时打开，但是当我点击关闭时，它不会保持关闭状态。一两秒后，它会再次打开并提交另一个表单/消息。请参阅下面的代码。我在某处循环，并认为我在某处丢失了“return”或“preventDefault（）”。谢谢！Bootstrap模式会在成功提交表单时打开，但在点击“关闭”按钮时不会保持关闭状态

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

回答：

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

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

如果你希望它关闭它的成功，你可以用这个代替

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

，或者您也可以添加这个给你提交按钮。

data-dismiss="modal"

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

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

回答：

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

以上是 Bootstrap模式会在成功提交表单时打开，但在点击“关闭”按钮时不会保持关闭状态 的全部内容， 来源链接： utcz.com/qa/260164.html

回到顶部