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上，因此您正在尝试通过https加载jQuery，该浏览器已将其阻止。将jQuery依赖项更改为

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

...它将起作用。

Modal Popup在Codepen中工作，但不在网站上工作

1 个答案: