モーダル非表示機能がありません

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

あなたはとにかく別のmodalをshowしようとしているので、あなたは、あなたのbuttonに代わりdata-dismiss="modal"を追加する必要があります。

EDIT：ボタン

<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 
}; 

Answer 2

..

$('#myModal').modal('hide') 

これは働いていた...

$('#myModal').hide(); 
$('.modal-backdrop').hide(); 

出典：。。https://stackoverflow.com/a/29560331/7069248

は、ブートストラップ