CODEWITHSUNDEEP
javascripthtmlcssmodal-dialog
D Smith
D Smith

Reputation: 127

Modal Popup working in codepen but not on website

please can you assist - my modal popup works in codepen however when I migrate over to my website the modal popup doesn't work

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>'
            }
        });

The pulse buttons etc all works, however, the modal popup does not open on my website at all. Works perfectly on codepen - link: https://codepen.io/DrSmith69/pen/LgOPpO

Link on website where it doesn't work: https://s3-online.com/

Upvotes: 1

Views: 1253

Answers (1)

tao
tao

Reputation: 90287

You're trying to load jQuery over http, which is blocked by your browser, since your website is on https. Change the jQuery dependency to 

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

... and it will work.

Upvotes: 1

Related Questions