Fancybox 3 和 Bootstrap 3 Modal 奇怪的错误

Question

我最近决定尝试fancybox 3 并发现一个非常奇怪的错误，该错误仅在打开引导模式窗口时出现。

所以我做了一个小演示作为示例（以全页模式查看）

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<link href="https://gitcdn.xyz/repo/fancyapps/fancybox/master/dist/jquery.fancybox.css" rel="stylesheet" type="text/css" />
<script src="https://code.jquery.com/jquery-3.1.1.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.js"></script>
<script src="https://gitcdn.xyz/repo/fancyapps/fancybox/master/dist/jquery.fancybox.js" type="application/javascript"></script>

<!-- Gallery modal -->
<div id="galleryModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="galleryModal">
  <div class="modal-dialog modal-lg" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title">Cats Gallery</h4>
      </div>
      <div class="modal-body">
        <a href="http://www.cats.org.uk/uploads/images/featurebox_sidebar_kids/grief-and-loss.jpg"
           data-fancybox="gallery"
           class="btn btn-default"
           >Show Cat 1</a>
        <a href="http://cdn1-www.cattime.com/assets/uploads/gallery/persian-cats-and-kittens/persian-cats-and-kittens-1.jpg"
           data-fancybox="gallery"
           class="btn btn-default"
           >Show Cat 2</a>
      </div>
    </div>
  </div>
</div>

<button class="btn btn-default" data-toggle="modal" data-target="#galleryModal">Show cats</button>
<br />
<br />
<a href="http://www.cats.org.uk/uploads/images/featurebox_sidebar_kids/grief-and-loss.jpg"
   data-fancybox="gallery2"
   class="btn btn-default"
   >Show Cat 1</a>
<a href="http://cdn1-www.cattime.com/assets/uploads/gallery/persian-cats-and-kittens/persian-cats-and-kittens-1.jpg"
   data-fancybox="gallery2"
   class="btn btn-default"
   >Show Cat 2</a>

当您只是打开图片并选择上一张或下一张时，一切都很好。但是当你从引导模式窗口做同样的事情时......查看浏览器控制台......它充满了错误。看起来像花式框的焦点事件奇怪地与模态的焦点事件相交。

我的问题是如何在不更改库代码的情况下解决此问题？

Answer 1

如果您使用的是 fancyBox v3，则不需要任何额外的脚本来实现模态功能。您可以简单地使用 fancyBox 来显示两种模式。

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<link href="https://gitcdn.xyz/repo/fancyapps/fancybox/master/dist/jquery.fancybox.css" rel="stylesheet" type="text/css" />
<script src="https://code.jquery.com/jquery-3.1.1.js"></script>

<script src="https://gitcdn.xyz/repo/fancyapps/fancybox/master/dist/jquery.fancybox.js" type="application/javascript"></script>

<!-- Gallery modal -->


    <div id="galleryModal" class="modal-content" style="display:none;">
      <div class="modal-header">
        <button type="button" class="close" data-fancybox-close aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title">Cats Gallery</h4>
      </div>
      <div class="modal-body">
        <a href="http://www.cats.org.uk/uploads/images/featurebox_sidebar_kids/grief-and-loss.jpg"
           data-fancybox="gallery"
           class="btn btn-default"
           >Show Cat 1</a>
        <a href="http://cdn1-www.cattime.com/assets/uploads/gallery/persian-cats-and-kittens/persian-cats-and-kittens-1.jpg"
           data-fancybox="gallery"
           class="btn btn-default"
           >Show Cat 2</a>
      </div>
    </div>



<button class="btn btn-default" data-fancybox data-options='{"smallBtn":false, "buttons":false}' data-src="#galleryModal">Show cats</button>
<br />
<br />
<a href="http://www.cats.org.uk/uploads/images/featurebox_sidebar_kids/grief-and-loss.jpg"
   data-fancybox="gallery2"
   class="btn btn-default"
   >Show Cat 1</a>
<a href="http://cdn1-www.cattime.com/assets/uploads/gallery/persian-cats-and-kittens/persian-cats-and-kittens-1.jpg"
   data-fancybox="gallery2"
   class="btn btn-default"
   >Show Cat 2</a>