Question

我对Jason Butz的灯箱有疑问。这是代码：

<!DOCTYPE html>
<html lang="en">
<head>  
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="A Bootstrap Blog Template">
<meta name="author" content="Billy Halim">
<title>Home</title>
<link rel="stylesheet" type="text/css" href="bootstrap-lightbox.css">
<script type="text/javascript" src="bootstrap-lightbox.js"></script>
</head>
<body>

    <a data-toggle="lightbox" href="#demoLightbox">Open Lightbox</a>
    <div id="demoLightbox" class="lightbox hide fade"  tabindex="-1" role="dialog" aria-hidden="true">
    <div class='lightbox-content'>
        <img src="image.png">
        <div class="lightbox-caption"><p>Your caption here</p></div>
    </div>
</div>

问题是有一个名为“打开灯箱”的链接以及图像。图像最初出现了。如果我点击该链接，它只能向下滚动以指向图像，它不会出现在灯箱中。

对此有何解决方案？

Answer 1

如果不包含jQuery和Bootstrap，你的小提琴将无法运作。它们都是插件运行所必需的。话虽如此，插件不再被维护，似乎不能与Bootstrap 3.3.4一起使用，但与2.3.2一样，你的代码似乎是这样。您可能希望在3.3.4中使用this lightbox。

这是bootstrap 3.3.4中的错误

TypeError: undefined is not an object (evaluating 'this.$backdrop[0].offsetWidth')

这是一个有效的jsFiddle 2.3.2

Answer 2

以下是一个适用于bootstrap 3的灯箱脚本：http://ashleydw.github.io/lightbox/

单击链接后，Bootstrap灯箱未显示灯箱

2 个答案: