javascript - 模态弹出窗口在 codepen 中工作但不在网站上工作

Question

请你帮忙 - 我的模态弹出窗口在 codepen 中工作，但是当我迁移到我的网站时，模态弹出窗口不起作用

HTML:

<div class="container">
  <img src="https://s3-online.com/images/2018/10/15/placeit.png" alt="brain">
  <span class='pulse-button'/></span>
  <span class='pulse-button2'></span>
  <span class='pulse-button3'></span>
  <span class='pulse-button4'></span>
</div>

CSS:

@import "compass/css3";

/* Container needed to position the button. Adjust the width as needed */
.container {
  position: relative;
  width: 50%;
}

/* Make the image responsive */
.container img {
  width: 1000px;
  height: auto;
}

/* Style the button and place it in the middle of the container/image */
.pulse-button {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: 260px;
  margin-top: -150px;
  display: block;
  width: 20px;
  height: 20px;
  border: none;
  border-radius: 50%;
  background: navy;
  cursor: pointer;
  box-shadow: 0 0 0 0 rgba(#5a99d4, .5);
  -webkit-animation: pulse 1.5s infinite;
}

.pulse-button:hover {
  -webkit-animation: none;
}

.pulse-button2 {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: -50px;
  margin-top: -115px;
  display: block;
  width: 20px;
  height: 20px;
  border: none;
  border-radius: 50%;
  background: navy;
  cursor: pointer;
  box-shadow: 0 0 0 0 rgba(#5a99d4, .5);
  -webkit-animation: pulse 1.5s infinite;
}

.pulse-button2:hover {
  -webkit-animation: none;
}

.pulse-button3 {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: 260px;
  margin-top: 0px;
  display: block;
  width: 20px;
  height: 20px;
  border: none;
  border-radius: 50%;
  background: navy;
  cursor: pointer;
  box-shadow: 0 0 0 0 rgba(#5a99d4, .5);
  -webkit-animation: pulse 1.5s infinite;
}

.pulse-button3:hover {
  -webkit-animation: none;
}

.pulse-button4 {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: -50px;
  margin-top: 150px;
  display: block;
  width: 20px;
  height: 20px;
  border: none;
  border-radius: 50%;
  background: navy;
  cursor: pointer;
  box-shadow: 0 0 0 0 rgba(#5a99d4, .5);
  -webkit-animation: pulse 1.5s infinite;
}

.pulse-button4:hover {
  -webkit-animation: none;
}

@-webkit-keyframes pulse {
  0% {
    @include transform(scale(.9));
  }
  70% {
    @include transform(scale(1));
    box-shadow: 0 0 0 50px rgba(#5a99d4, 0);
  }
    100% {
    @include transform(scale(.9));
    box-shadow: 0 0 0 0 rgba(#5a99d4, 0);
  }
}

.white-popup {
  position: relative;
  background: #FFF;
  padding: 40px;
  width: auto;
  max-width: 800px;
  margin: 20px auto;
  text-align: center;
}

Javascript:

// Define data for popup
var data = [
  {
    photo_img: "https://images-na.ssl-images-amazon.com/images/I/81UYaJFVjCL._SY450_.jpg", // Prefix "_img" is special. With it Magnific Popup finds an  element "photo" and replaces it completely with image tag.
    }
];


// Initialize popup 
$('.pulse-button').magnificPopup({
      key: 'image-popup',
      items: data,
      type: 'inline',
      inline: {
        // Define markup. Class names should match key names.
        markup: '<div class="white-popup"><div class="mfp-close"></div>'+
 '<div class="mfp-photo"></div>'+
            '</div>'
            }
        });

// Define data for popup
var data = [
  {
    photo_img: "https://s3-online.com/images/2018/10/13/ai-pic-2.jpg", // Prefix "_img" is special. With it Magnific Popup finds an  element "photo" and replaces it completely with image tag.
    }
];


// Initialize popup 
$('.pulse-button2').magnificPopup({
      key: 'image-popup',
      items: data,
      type: 'inline',
      inline: {
        // Define markup. Class names should match key names.
        markup: '<div class="white-popup"><div class="mfp-close"></div>'+
 '<div class="mfp-photo"></div>'+
            '</div>'
            }
        });

脉冲按钮等一切正常，但是，模态弹出窗口根本无法在我的网站上打开。在 codepen 上完美运行 - 链接:https://codepen.io/DrSmith69/pen/LgOPpO

网站上的链接不起作用:https://s3-online.com/

Answer 1

您正尝试通过 http 加载 jQuery，这被您的浏览器阻止了，因为您的网站位于 https 上。将 jQuery 依赖项更改为

https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js

... 它会起作用。