Modal Hide Not Working

Question

The modal form submits, returns formSuccess, sends the email, returns the signup alert, but the modal does not hide. Any suggestions?

The modal 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>

The signup alerts 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>

And here is the code from js file.

$("#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
};

Then this has your answer - http://stackoverflow.com/questions/10466129/how-to-hide-bootstrap-modal-from-javascript — Nikhil Nanjappa, Dec 08 '16 at 16:25

ScanQR · Answer 1 · 2016-12-08T16:29:59.267

2

You should add data-dismiss="modal" instead on your button because you are anyway going to show another modal.

EDIT : Change type from submit to button

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

And try this,

$("#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
};

edited Dec 08 '16 at 16:29

answered Dec 08 '16 at 16:01

ScanQR

3,740
1
13
30

Thanks, this hides the modal, but does not submit the form / post the data to the php file. – edb Dec 08 '16 at 16:24
@elbuo try my updated answer. Change submit type to button and on click of it trigger ajax and subsequently it will close your modal too. – ScanQR Dec 08 '16 at 16:30
This didn't work either. Thanks for the suggestions. – edb Dec 08 '16 at 16:51
Strange. Did you see any error? Can you add console.log() and check if click is called – ScanQR Dec 08 '16 at 16:59

score 1 · Answer 2 · edited Aug 15 '18 at 20:36

1

This solution works for me:

setTimeout(function(){
    $('#close-modal').click();
    $('#close-modal').click();
},200);

edited Aug 15 '18 at 20:36

Omar Gonzalez

1,117
4
14
22

answered Aug 15 '18 at 20:16

Rafael Pinheiro

11
1

score 0 · Answer 3 · edited May 23 '17 at 12:01

0

Instead of..

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

This worked...

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

Source: https://stackoverflow.com/a/29560331/7069248

Could be related to version of Bootstrap

edited May 23 '17 at 12:01

Community

1
1

answered Jan 25 '17 at 19:55

edb

19
1
1
3

Modal Hide Not Working

3 Answers3