关闭模态并滚动到 div答案

【问题标题】：Close modal and scroll to div关闭模态并滚动到 div
【发布时间】：2016-09-21 10:33:18
【问题描述】：

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

当我点击联系人时，引导模式按预期关闭，但没有滚动到联系人部分，为什么？

【问题讨论】：

假设您尝试通过引导模式上的叠加层单击按钮，这就是您的问题。点击事件被覆盖层捕获以隐藏模式。隐藏模式后，您需要再次单击该按钮以在其上引发事件。更好的解决方案是挂钩hide.bs.modal 事件并在其中执行滚动
控制台有错误吗？
@RoryMcCrossan 好的，我试试看
@ChetanGawai none

标签： javascript jquery html twitter-bootstrap

【解决方案1】：

不要使用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);
});

【讨论】：

【解决方案2】：

我的想法，就像你在 cmets 中看到的那样，是基于监听 hide.bs.modal 事件。

我的sn-p：

$('#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>

【讨论】：

但即使我点击 x 按钮，它也会向下悬停
@Lynob 代码段已更新。现在，单击 x 按钮，向下滚动不会生效。非常感谢，让我知道
谢谢，现在它可以工作了，在我的代码中修复了一些东西之后，第一个答案也有效，所以我接受了它，因为它们都有效，但他的代表少得多，他的答案首先发布，但你的答案有效！非常感谢！
我非常同意你所说的一切，真是一位绅士！