Question

我的模态框中有一个链接，必须转到锚点。

我想要的是什么：当用户点击链接（<a data-dismiss="modal" href="#video-tuto" class="jaune" >consulter nos tutos</a>）时，模式框会关闭，页面会滚动到锚点。

我有什么：当我点击链接时，模态框会关闭，但没有滚动...

我正在使用Bootstrap 3。

这是我的HTML：

<div class="modal fade" id="modal-dalle-exterieure" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <!-- Bouton fermer (croix) -->
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                    <h4 class="modal-title uppercase" id="myModalLabel">Dalle extérieure</h4>
                </div>
                <div class="modal-body">
                    <h5>Et pour des conseils de réalisation étape par étape, n’hésitez pas à
                        <a data-dismiss="modal" href="#video-tuto" class="jaune" >consulter nos tutos</a>
                    </h5>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Fermer</button>
                </div>
            </div>
        </div>
    </div>

带锚点的页面：

<div id="video-tuto" class="row video-tuto letterspacing">
    <div class="col-lg-12 titre">
        <h3 class="uppercase">vidéos tutos ...</h3>
    </div>
</div>

Answer 1

您可以收听hidden.bs.modal event：

当模态完成对用户的隐藏时将触发此事件（将等待CSS转换完成）。

要滚动到您的div，您可以使用jQuery animate：

$('#modal-dalle-exterieure').on('hidden.bs.modal', function (e) {
  $('html,body').animate({
              scrollTop: $("#video-tuto").offset().top},
          'fast');
})

<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="#modal-dalle-exterieure">
    Launch demo modal
</button>
<div class="modal fade" id="modal-dalle-exterieure" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <!-- Bouton fermer (croix) -->
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title uppercase" id="myModalLabel">Dalle extérieure</h4>
            </div>
            <div class="modal-body">
                <h5>Et pour des conseils de réalisation étape par étape, n’hésitez pas à
                    <a data-dismiss="modal" href="#video-tuto" class="jaune" >consulter nos tutos</a>
                </h5>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Fermer</button>
            </div>
        </div>
    </div>
</div>

<div style="height: 300px;">

</div>

<div id="video-tuto" class="row video-tuto letterspacing">
    <div class="col-lg-12 titre">
        <h3 class="uppercase">vidéos tutos ...</h3>
    </div>
</div>

锚出我的模态框

1 个答案: