閉じるモーダルと私は連絡先をクリックすると

Question

$("#contact-form").click(function() { 
 
    $('html, body').animate({ 
 
     scrollTop: $("#contact-section").offset().top 
 
    }, 2000); 
 
});

<div class="modal fade" id="saModal" role="dialog"> 
 
    <div class="modal-dialog"> 
 
     <div class="modal-content"> 
 
      <div class="modal-header"> 
 
       <button type="button" class="close" data-dismiss="modal">&times;</button> 
 
       <h3>title</h3> 
 
      </div> 
 
      <div class="modal-body"> 
 
       text 
 
      </div> 
 
      <div class="modal-footer"> 
 
       <button type="button" id="contact-form" class="btn btn-default pull-right glyphicon glyphicon-envelope">Contact</button> 
 
      </div> 
 
     </div> 
 
    </div> 
 
</div> 
 

 
<div id="contact-section"> 
 
<?php require 'contact.php'; ?> 
 
</div>

をDIVまでスクロールし、ブートストラップモーダルが閉じますが、なぜ、セクションに連絡することをスクロールしませんか？あなたがコメントで見ることができるように

Answer 1

はhide.bs.modalイベントを受け取るに基づいており、data-dismiss="modal"

<button type="button" id="contact-form" class="btn btn-default pull-right glyphicon glyphicon-envelope" >Contact</button> 

$("#contact-form").click(function() { 
    $('#myModal').modal('hide'); 
    $('html, body').animate({ 
     scrollTop: $("#contact-section").offset().top 
    }, 2000); 
}); 

Answer 2

私の考えを使用しないでください。

マイスニペット：

$('#saModal').on('hide.bs.modal', function(e) { 
 
    if ($('#saModal').attr('ModalXbuttonPressed') != undefined) { 
 
    $('#saModal').removeAttr('ModalXbuttonPressed'); 
 
    return; 
 
    } 
 
    $('html, body').animate({ 
 
    scrollTop: $("#contact-section").offset().top 
 
    }, 2000); 
 
}); 
 

 
$('#saModal button[class="close"][data-dismiss="modal"]').on('click', function(e) { 
 
    $('#saModal').attr('ModalXbuttonPressed', true); 
 
}); 
 

 

 
$("#contact-form").on('click', function(e) { 
 
    $('#saModal').modal('hide'); 
 
});

#contact-section { 
 
    position: absolute; 
 
    top: 500px; 
 
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 

 
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#saModal"> 
 
    Open saModal 
 
</button> 
 
<div class="modal fade" id="saModal" role="dialog"> 
 
    <div class="modal-dialog"> 
 
     <div class="modal-content"> 
 
      <div class="modal-header"> 
 
       <button type="button" class="close" data-dismiss="modal">&times;</button> 
 
       <h3>title</h3> 
 
      </div> 
 
      <div class="modal-body"> 
 
       text 
 
      </div> 
 
      <div class="modal-footer"> 
 
       <button type="button" id="contact-form" class="btn btn-default pull-right glyphicon glyphicon-envelope">Contact</button> 
 
      </div> 
 
     </div> 
 
    </div> 
 
</div> 
 

 
<div id="contact-section"> 
 
    <p>contact-section</p> 
 
    <p>contact-section</p> 
 
    <p>contact-section</p> 
 
    <p>contact-section</p> 
 
</div>