为什么我的复制和粘贴bootstrap灯箱无法正常工作？

Question

我尝试复制并粘贴来自http://bootsnipp.com/snippets/featured/bootstrap-lightbox的Bootstrap Lightbox示例， 进入我正在处理的网站：http://www.redfuryrevenge.com

它看起来与示例相同，但是当我点击图片（在图片部分）时，它只是将我跳到页面顶部，而不是打开模态。

我已经为此工作了5个多小时。想是时候寻求帮助了。

Answer 1

我尝试做同样的事情并得到相同的结果，因为我没有导入Bootstrap css和JS。

导入jQuery后导入引导程序JS再次尝试

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>

在头部分导入bootstrap css as，

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">

导入上述2个文件后，您将获得所需的输出。

Answer 2

您的项目中没有可用的jquery库，它在尝试打开时会获得404 HTTP状态代码。

每次开发时，请使用chrome控制台测试您的网络。

Answer 3

Failed to load resource: the server responded with a status of 404 (Not Found)

这是第一个错误，然后是第二个错误：

Uncaught Error: Bootstrap's JavaScript requires jQuery

这意味着您无法加载Jquery文件。您的文件路径应该是正确的或只是使用链接

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

您可能希望执行cdn call back而不是简单地从链接加载Jquery，这意味着如果jquery无法从Google主机加载，然后在您的服务器上加载该版本。

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
<script>if (!window.jQuery) { document.write('<script src="/path/to/your/jquery"><\/script>'); }
</script>

我想如果在您复制灯箱代码之前它是否正常工作，那么您可能正确拥有文件顺序。这意味着，您在引导js文件之前加载了Jquery文件。如果不是，您可能想要这样做，因为如果没有该文件顺序，Bootstrap将无法正常运行。