在表单提交而不是单击时触发引导程序模式

Question

我想在提交时而不是在点击时触发引导程序模式，因为默认情况下它被编程为这样做。 这是我的表单和触发模式的按钮：

  <form name="signup-form" action="http://formspree.io/davidgeismar@wetennis.fr" id="conversion_form" method="POST">
                            <input id="email-input" class="signup-input" type="email" name="email_address" value="" placeholder="Laisse ton mail et reçois le coupon..." title="Please enter a valid email address." required>
                            <button type="submit" class="submit-btn"data-toggle="modal" data-target="#myModal">GO</button>
                        </form>

这是模态：

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
            </div>
        </div>
      </div>

我按照帖子中的建议尝试了这个：

  $("#myModal").on("show.bs.modal", function(e){
    e.stopPropagation();
  })

但这不起作用。

我应该做的只是在实际提交表单时触发模式。 这是在这堆JS代码之后：

$("#conversion_form").on("submit", function(e){
       e.preventDefault();
       var $this = $(this);
       var email = $('#email-input').val();
       $.ajax({
                url: $this.attr('action'), // Le nom du fichier indiqué dans le formulaire
                method:"POST",
                dataType: "json", // La méthode indiquée dans le formulaire (get ou post)
                data: {message: email}, // Je sérialise les données (j'envoie toutes les valeurs présentes dans le formulaire)
                success: function(data, textStatus, xhr) {
                    if(xhr.status==200)
                        alert('Nous vous tiendrons au courant de nos dernières actu ! \n Wefoot');
                    $('#email-input').val('');
                    // $('#myModal').popover('show');

                }
            });

    })

Answer 1

如果要在表单完成提交过程后显示模态，只需在成功函数中添加以下代码：

$("#conversion_form").on("submit", function(e){
   e.preventDefault();
   var $this = $(this);
   var email = $('#email-input').val();
   $.ajax({
            url: $this.attr('action'), // Le nom du fichier indiqué dans le formulaire
            method:"POST",
            dataType: "json", // La méthode indiquée dans le formulaire (get ou post)
            data: {message: email}, // Je sérialise les données (j'envoie toutes les valeurs présentes dans le formulaire)
            success: function(data, textStatus, xhr) {
                if(xhr.status==200)
                    alert('Nous vous tiendrons au courant de nos dernières actu ! \n Wefoot');
                $('#email-input').val('');
                $('#myModal').modal('show'); // Add this and it will open the modal 

            }
        });

});

或者，如果您想在提交表单之前进行操作，则只需添加

$('#myModal').modal('show');

在ajax调用之前。 您可以在这里找到更多信息： https : //stackoverflow.com/a/13183713/2911633

Answer 2

您需要删除data-toggle="modal" data-target="#myModal"并手动触发模态，您可以在代码中使用它

首先将您的模态初始化为false，以便它不会打开

$('#myModal').modal({ show: false})`

在提交方法中编写以下代码

$('#myModal').modal('show');