Модал Popup работает в Codepen, но не на веб-сайте - PullRequest
Новая
       8

Модал Popup работает в Codepen, но не на веб-сайте

0 голосов
/ 15 октября 2018

, пожалуйста, вы можете помочь - мое модальное всплывающее окно работает в 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 /

1 Ответ

0 голосов
/ 15 октября 2018

Вы пытаетесь загрузить jQuery через http, который заблокирован вашим браузером, так как ваш сайт работает на https.Измените зависимость jQuery на 

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

... и она будет работать.

...