javascript - 模态隐藏不起作用

Question

模态表单提交，返回 formSuccess，发送电子邮件，返回注册提醒，但模态不隐藏。有什么建议吗？

模态 html:

   <div class="modal fade" id="signupModal" tabindex="-1" role="dialog" aria-labelledby="signupModal" aria-hidden="true">
     <div class="modal-dialog">
       <div class="modal-content">
         <div class="modal-header">
           <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
           <h4 class="modal-title">Provide a few details and we'll be in touch...</h4>
         </div>
         <div class="modal-body">
           <form id="contactForm" role="form">
             <input type="hidden" id="theme" name="theme" value="flatly"/>
             <div class="form-group">
               <label for="name">Name</label>
               <input type="text" class="form-control" id="name" name="name" placeholder="Your name" required>
             </div>
             <div class="form-group">
               <label for="email">Email address</label>
               <input type="email" class="form-control" id="email" name="email" placeholder="Your email address" required>
             </div>
             <div class="form-group">
               <label for="message">Message</label>
               <textarea id="message" class="form-control" rows="5" placeholder="Have a question or comment?" required></textarea>
             </div>
         </div>
         <div class="modal-footer">
           <button id="form-submit" type="submit" class="btn btn-success">Sign Up</button>
         </div>
         </form> <!-- add tag v_07 -->
       </div><!-- /.modal-content -->
     </div><!-- /.modal-dialog -->
   </div>

注册提醒 html:

  <div class="container form-message">
    <div class="row">
      <div id="signupSuccess" class="alert alert-success" style="display:none">
       <p id="signupSuccessText">Thanks for signing up for preview access, we'll be in touch! In the meantime join us on Twitter, Facebook, and LinkedIn.</p>
      </div>

      <div id="signupError" class="alert alert-info" style="display:none">
      <p id="signupErrorText">Well this is embarrassing. It looks like we're having trouble. While we fix this, we can be reached at info@timbercheck.net</p>
      </div>
    </div>
  </div>

这是 js 文件中的代码。

$("#contactForm").submit(function(event){
    event.preventDefault();
    submitForm();
});

function submitForm(){
    var name = $("#name").val();
    var email = $("#email").val();
    var message = $("#message").val();

$.ajax({
    type: "POST",
    url: "php/process.php",
    data: "name=" + name + "&email=" + email + "&message=" + message,
    success : function(text){
        if (text == "success"){
            formSuccess();
        } else {
            formError();
        }
    }
});

};

function formSuccess(){
    $("#signupSuccess").show();
    $("#signupModal").modal('hide'); // add v_07
};

function formError(){
    $("#signupError").show();
    $("#signupModal").modal('hide'); // add v_07
};

Answer 1

您应该在按钮上添加data-dismiss="modal"，因为无论如何您都会显示另一个模式.

编辑:将类型从提交更改为按钮

<button id="form-submit" type="button" class="btn btn-success" data-dismiss="modal">Sign Up</button>

试试这个，

$("#form-submit").click(function(event){

    var name = $("#name").val();
    var email = $("#email").val();
    var message = $("#message").val();

$.ajax({
    type: "POST",
    url: "php/process.php",
    data: "name=" + name + "&email=" + email + "&message=" + message,
    success : function(text){
        if (text == "success"){
            formSuccess();
        } else {
            formError();
        }
    }
});

};

function formSuccess(){
    $("#signupSuccess").show();
    $("#signupModal").modal('hide'); // add v_07
};

function formError(){
    $("#signupError").show();
    $("#signupModal").modal('hide'); // add v_07
};