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

javascript - 为什么我的复制和粘贴bootstrap灯箱无法正常工作?,第1张

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

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

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

最佳答案:

3 个答案:

答案 0 :(得分:0)

我尝试做同样的事情并得到相同的结果,因为我没有导入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个文件后,您将获得所需的输出。

答案 1 :(得分:0)

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

javascript - 为什么我的复制和粘贴bootstrap灯箱无法正常工作?,enter image description here,第2张

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

答案 2 :(得分:0)

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将无法正常运行。

本文经用户投稿或网站收集转载,如有侵权请联系本站。

发表评论

0条回复