Twitter Bootstrap：在锚链接/滚动上触发模态

Question

我正在使用Twitter bootstrap开发移动网络应用程序。

现在我想要一个指向/跳转到文档中的锚点的链接，然后立即显示一个模态。 模态应该是用户首先必须阅读的警告消息，然后他可以在单击“有理解”按钮时确认并关闭模式。

有没有办法达到这个目的？我坚持这个，无法找到出路...

有关下面的更多信息，请参阅。

如果用户点击带有红色箭头的链接，则文档内容应滚动到相应的锚点，同时应显示警告模式。

对于嵌入式图像上的部分德语，我们深表歉意。

很多人。

Answer 1

是的，你可以做但你必须手动加载模态

<a href="#desiredlocation" onclick="load_modal()">

</a>


<div id="myModal" class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      ...
    </div>
  </div>
</div>

<script type="text/javascript">
function load_modal(){
$('#myModal').modal('show');
}
</script>

这是一个fiddle

Answer 2

假设您的链接有一个特殊的类（我在示例中使用了.trigger），您可以这样做：

$('.trigger').on('click', function() {
  $(window).scroll(function() {
    clearTimeout($.data(this, 'scrollTimer'));
    $.data(this, 'scrollTimer', setTimeout(function() {
      $('#myModal').modal('show');        
    }, 250));
    $(this).unbind("scroll");
});

我创建了一个示例bootply，其模板类似于您的屏幕截图结构。所以不要感到困惑。只需点击左侧的链接section 4（向下滚动一下），即可查看正在运行的功能。

注意：我专注于您的陈述：

  

现在我想要一个指向/跳转到文档中的锚点的链接，然后立即显示一个模态。

这样，模式在滚动完成后打开。 @Shreeraj Karki答案在点击后立即打开模态。

BOOTPLY