Question

我正在使用bootstrap，在打开弹出窗口时遇到了一些问题。

这是我使用的代码：

 <li><a href="#cmvideo" data-toggle="modal">WATCH VIDEO</a></li>



 <div class="modal fade" id="cmvideo" role="dialog">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-body">
                    <iframe width="560" height="315" src="http://www.youtube.com/xxxxxxxxxxxxxxxx" frameborder="0" allowfullscreen></iframe>
                </div>
            </div>
        </div>
    </div>

工作正常。但是我添加了一个jQuery代码，用于将页面平滑地滑动到锚标记上的页面的不同部分。

这是代码：

$(function() {
  $('a[href*=#]:not([href=#])').click(function() {
    var header = 180;
    if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
      var target = $(this.hash);
      target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
      if (target.length) {
        $('html,body').animate({
          scrollTop: target.offset().top - header
        }, 1000);
        return false;
      }
    }
  });
});

此功能运作良好。但现在弹出窗口无效。似乎它会覆盖引导功能。任何人都可以帮我解决这个问题吗？

Answer 1

将平滑滚动代码的第二行上的选择器更改为：

'a[href*=#]:not([href=#]):not([data-toggle="modal"])'

这将阻止平滑滚动处理程序附加到模态弹出链接。

请参阅this example JSfiddle。

Bootstrap弹出窗口无法正常工作

1 个答案: