Fancybox 3和Bootstrap 3模式奇怪的错误

Question

我最近决定尝试使用Fancybox 3，并找到了一个非常奇怪的错误，只有开放的Bootstrap模式窗口才会出现。

所以我做了一些演示为示例（请参见全页模式）

<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>

当您仅打开图片并选择上一个或下一个时，一切都很好。但是，当您从Bootstrap Modal窗口做同样的事情时...请参阅浏览器控制台...这充满了错误。看起来像Fancybox的焦点事件与Modal的焦点事件奇怪地相交。

我的问题是如何在不更改库代码的情况下进行修复？

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>