在 Codepen 中工作的 JS 在我的 html 页面上不起作用

Question

你能解释一下为什么这段代码在 codepen 中运行良好，但在我的 html-page 中却不行。我什至无法检查可能出现的错误。我很高兴你的帮助！我想这个错误与连接一些 jquery 模块有关。但我试图修复它并连接其中一些但没有成功。 css 和 html 效果很好。但是我打不开图片

总的来说，我决定 public 整个代码来自 html 页。不幸的是，删除 https 中的 's' 字符并替换 jquery 的连接并没有解决问题..

问题已解决。我的代码不起作用的原因是 bootstrap。我需要将一个特殊的 bootstrap link 连接到我的代码，它解决了问题。 https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css'> https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.1/animate.min.css'>

<!DOCTYPE html>
<html lang="en">
<head>
    <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.3.1.min.js">
</script>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div class="container">
    <div class="gallery">
        <img src="https://img.buzzfeed.com/buzzfeed-static/static/2015-08/11/14/enhanced/webdr01/original-9161-1439317330-3.jpg?downsize=715:*&output-format=auto&output-quality=auto" alt="" width="100%" height="auto" class="gallery-img" />

        <img src="https://img.buzzfeed.com/buzzfeed-static/static/2015-08/11/14/enhanced/webdr08/original-1654-1439317465-3.jpg?downsize=715:*&output-format=auto&output-quality=auto" alt="" width="100%" height="auto" class="gallery-img" />
        <img src="https://img.buzzfeed.com/buzzfeed-static/static/2015-08/11/15/enhanced/webdr08/original-13354-1439321173-3.jpg?downsize=715:*&output-format=auto&output-quality=auto" alt="" width="100%" height="auto" class="gallery-img" />
        <img src="https://img.buzzfeed.com/buzzfeed-static/static/2015-08/11/15/enhanced/webdr04/original-25740-1439321209-5.jpg?downsize=715:*&output-format=auto&output-quality=auto" alt="" width="100%" height="auto" class="gallery-img" />
        <img src="https://img.buzzfeed.com/buzzfeed-static/static/2015-08/11/15/enhanced/webdr08/original-9292-1439319916-3.jpg?downsize=715:*&output-format=auto&output-quality=auto" alt="" width="100%" height="auto" class="gallery-img" />
        <img src="https://img.buzzfeed.com/buzzfeed-static/static/2015-08/11/14/enhanced/webdr05/original-6710-1439319334-17.jpg?downsize=715:*&output-format=auto&output-quality=auto" alt="" width="100%" height="auto" class="gallery-img" />

        <img src="https://img.buzzfeed.com/buzzfeed-static/static/2015-08/11/15/enhanced/webdr02/original-16901-1439320287-3.jpg?downsize=715:*&output-format=auto&output-quality=auto" alt="" width="100%" height="auto" class="gallery-img" />
        <img src="https://img.buzzfeed.com/buzzfeed-static/static/2015-08/11/15/enhanced/webdr04/original-29345-1439321306-8.jpg?downsize=715:*&output-format=auto&output-quality=auto" alt="" width="100%" height="auto" class="gallery-img" />
        <img src="https://img.buzzfeed.com/buzzfeed-static/static/2015-08/11/15/enhanced/webdr15/original-20286-1439320376-10.jpg?downsize=715:*&output-format=auto&output-quality=auto" alt="" width="100%" height="auto" class="gallery-img" />
    <img src="https://img.buzzfeed.com/buzzfeed-static/static/2015-08/11/14/enhanced/webdr02/original-6989-1439317507-15.jpg?downsize=715:*&output-format=auto&output-quality=auto" alt="" width="100%" height="auto" class="gallery-img" />
    <img src="https://img.buzzfeed.com/buzzfeed-static/static/2015-08/11/14/enhanced/webdr11/original-8867-1439317446-6.jpg?downsize=715:*&output-format=auto&output-quality=auto" alt="" width="100%" height="auto" class="gallery-img" />
    <img src="https://img.buzzfeed.com/buzzfeed-static/static/2015-08/11/14/enhanced/webdr03/original-22498-1439319085-3.jpg?downsize=715:*&output-format=auto&output-quality=auto" alt="" width="100%" height="auto" class="gallery-img" />
    </div>
</div>

<div id="myModal" class="modal fade" role="dialog">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-body">
      </div>
    </div>
  </div>
</div>
<style>
   .gallery {
    -webkit-column-count: 3;
    -moz-column-count: 3;
    column-count: 3;
    -webkit-column-gap: 10px;
    -moz-column-gap: 10px;
    column-gap: 10px;
    margin-top: 10px;
    overflow: hidden;
}

.gallery img {
    width: 100%;
    height: auto;
    transition: 500ms;
    margin-bottom: 10px;
    opacity: 0.8;
    page-break-inside: avoid; /* For Firefox. */
    -webkit-column-break-inside: avoid; /* For Chrome & friends. */
    break-inside: avoid; /* For standard browsers like IE. :-) */
}

.gallery img:hover {
    opacity: 1;
}

.modal-img,.model-vid{
  width:100%;
  height: auto;
}
.modal-body{
  padding:0px;
}

.modal-dialog {
    text-align: center;
    vertical-align: middle;
    display: block;
    top: 10%;
}

.modal-content {
  border: none;
}

@media screen and (max-width: 767px) {
    .gallery {
        -webkit-column-count: 2;
        -moz-column-count: 2;
        column-count: 2;
    }
    .gallery div { margin: 0;
        width: 200px;
    }
}

@media screen and (max-width: 479px) {
    .gallery {
        -webkit-column-count: 1;
        -moz-column-count: 1;
        column-count: 1;
    }
    .gallery div {
        margin: 0;
        width: 200px;
    }
}

</style>
<script>
   $(document).ready(function () {
  $(".gallery-img").click(function(){
    var t = $(this).attr("src");
    $(".modal-body").html("<img src='"+t+"' class='modal-img'>");
    $("#myModal").modal();
  });
});
</script>
</body>

</html>

Answer 1

@Oleg：HTML 中 <head> 元素中的 JQuery 脚本标记是吗？

参考 |示例：https://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_lib_microsoft

Answer 2

您可能试图在不安全的页面上加载安全内容。尝试使用 https 加载 jquery：http://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js

Answer 3

您确定 modal() 是 jQuery 库的一部分吗？您不需要加载 jqueryui 或 bootstrap 才能使用 modal() 吗？

检查您的代码笔设置，在 javascript 下，您会在 html 页面上找到您需要加载的库。

在 Codepen 中工作的 JS 在我的 html 页面上不起作用

JS that work in Codepen doesnt work on my html page

html

javascript

css

jquery

coffeescript