发送消息后弹出不起作用

我联系我们页面时，弹出窗口意味着当我发送消息时显示并消失，但没有任何反应。请帮助发送消息后弹出不起作用

联系我们页面和弹出模式

   <!-- The Contact Us Page --> 
       <div class="jumbotron jumbotron-sm"> 
       <div class="container"> 
        <div class="row"> 
        <div class="col-sm-12 col-lg-12 header"></div> 
        </div> 
       </div> 
       </div> 
       <div class="container card"> 
       <div class="row"> 
        <div class="col-sm-12 col-lg-12"> 
        <h1 class="h1">Contact us <span class="fa fa-envelope"></span> <!--<small class="col-xs-12" style="padding-left: 0">We will get back to You</small>--></h1> 
        </div> 
       </div> 
       <div class="row"> 
        <div class="col-sm-12 col-md-12"> 
        <div class="cardStyle"> 
         <form name="contact" id="form" data-toggle="validator"> 
         <div class="row"> 
          <div class="col-md-6"> 
          <div class="form-group"> 
           <label for="name"> 
           Name</label> 
           <input type="text" class="form-control" id="name" placeholder="Enter name" required="required" /> 
          </div> 
          <div class="form-group"> 
           <label for="email"> 
           Email Address</label> 
           <div class="input-group"> 
           <span class="input-group-addon"><span class="glyphicon glyphicon-envelope"></span> 
           </span> 
           <input type="email" class="form-control" id="email" placeholder="Enter email" required="required" /> 
           </div> 
          </div> 
          <div class="form-group"> 
           <label for="subject"> 
           Subject</label> 
           <select id="subject" name="subject" class="form-control" required="required"> 
           <option value="none" selected="" disabled>Choose One:</option> 
           <option value="general">General Customer Service</option> 
           <option value="collaborate">Collaborate with Us</option> 
           <option value="bug">Found a Bug/Issue</option> 
           <option value="other">Any other Queries</option> 
           </select> 
          </div> 
          </div> 
          <div class="col-md-6"> 
          <div class="form-group"> 
           <label for="name"> 
           Message</label> 
           <textarea name="message" id="message" class="form-control" rows="9" cols="25" required="required" placeholder="Message"></textarea> 
          </div> 
          </div> 
          <div class="col-md-12"> 
          <button type="submit" class="btn btn-success pull-right" id="btnContactUs">Send Message</button> 
          </div> 
         </div> 
         </form> 
        </div> 
        </div> 
       </div> 
       </div>

这是应该出现

       <!-- Form submitted Thank You Modal --> 
            <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"> 
            <div class="modal-dialog" role="document"> 
            <div class="modal-content"> 
            <div class="modal-header"> 
             <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button> 
             <h4 class="modal-title text-center" id="myModalLabel">Contact</h4> 
            </div> 
            <div class="modal-body"> 
             <h3 class="h3 text-center">Thank you for your feedback! We will get back to you.</h3> 
            </div> 
            <div class="modal-footer"> 
             <button type="button" class="btn btn-success" data-dismiss="modal">Close</button> 
            </div> 
            </div> 
            </div> 
            </div>

JavaScript文件

$(document).ready(function() { 
     $('#form').validator().on('submit', function(e) { 
     if (e.isDefaultPrevented()) { 
      // handle the invalid form... 
      $('#myModal').modal('hide'); 
     } else { 
      // everything looks good! 
      $('#myModal').modal('show'); 
     } 
     }) 

    });

来源

2017-05-07 Opeyemi Odedeyi