Magnific-popup doesn't work at all

问题

i'm with some problems here. I've tried everything for days! I already look at other questions here to try to solve my problem, but i can't still make magnific-popup to work.

I don't know what i'm doing wrong, i searched google, the original documentation, stackoverflow questions, but my site just doesn't show the pop-up.

Here is the code i have so far.

<!DOCTYPE html>
<head>
        <link rel="stylesheet" type="text/css" href="css/magnific-popup.css" />

        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
        <script src="js/jquery.magnific-popup.js"></script>

        <script>
        $(document).ready(function($){
        // Inline popups
            $('#inline-popups').magnificPopup({
                delegate: 'a',
                removalDelay: 500, //delay removal by X to allow out-animation
                callbacks: {
                    beforeOpen: function() {
                        this.st.mainClass = this.st.el.attr('data-effect');
                    }
                },
                midClick: true // allow opening popup on middle mouse click. Always set it to true if you don't provide alternative source.
            });
        }); 
        </script>

</head>
<body>

<h3>Magnific Popup CSS3-based animation effects</h3>
<div class="links">
  <h4>Text-based:</h4>
  <ul id="inline-popups">
    <li><a href="#test-popup" data-effect="mfp-zoom-out">Zoom-out</a></li>
  </ul>

<!-- Popup itself -->
<div id="test-popup" class="white-popup mfp-with-anim mfp-hide">You may put any HTML here. This is dummy copy. It is not meant to be read. It has been placed here solely to demonstrate the look and feel of finished, typeset text. Only for show. He who searches for meaning here will be sorely disappointed.</div>


</body>
</html>

The JS and CSS file included in my project i made the download from this page: https://github.com/dimsemenov/Magnific-Popup/tree/master/dist

I also added some extra code on my CSS file based on this stackoverflow question: I can't get magnific-popup animations to work

This is the CSS code i added:

html,body {margin:0; padding:10px; -webkit-backface-visibility:hidden;}

/* text-based popup styling */
.white-popup {
  position: relative;
  background: #FFF;
  padding: 25px;
  width:auto;
  max-width: 400px;
  margin: 0 auto; 
}

/* 

====== Zoom-out effect ======

*/
.mfp-zoom-out.mfp-bg {
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  filter: alpha(opacity=0);
  opacity: 0;

  -webkit-transition: all 0.3s ease-out;
  -moz-transition: all 0.3s ease-out;
  -o-transition: all 0.3s ease-out;
  -ms-transition: all 0.3s ease-out;
  transition: all 0.3s ease-out;
}
.mfp-zoom-out.mfp-bg.mfp-ready {
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
  filter: alpha(opacity=80);
  opacity: 0.8;
}
.mfp-zoom-out.mfp-bg.mfp-removing {
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  filter: alpha(opacity=0);
  opacity: 0;
}
.mfp-zoom-out .mfp-content{
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  filter: alpha(opacity=0);
  opacity: 0;

  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  -ms-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;

  -webkit-transform: scale(1.3);
  -moz-transform: scale(1.3);
  -o-transform: scale(1.3);
  -ms-transform: scale(1.3);
  transform: scale(1.3);
}
.mfp-zoom-out.mfp-ready .mfp-content {
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
  filter: alpha(opacity=100);
  opacity: 1;

  -webkit-transform: scale(1);
  -moz-transform: scale(1);
  -o-transform: scale(1);
  -ms-transform: scale(1);
  transform: scale(1);
}
.mfp-zoom-out.mfp-removing .mfp-content {
  -webkit-transform: scale(1.3);
  -moz-transform: scale(1.3);
  -o-transform: scale(1.3);
  -ms-transform: scale(1.3);
  transform: scale(1.3);
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  filter: alpha(opacity=0);
  opacity: 0;
}


/* preview styles */
html {
  font-family: "Calibri", "Trebuchet MS", "Helvetica", sans-serif;
}
h3 {
  margin-top: 0;
  font-size: 24px;
}
a,
  a:visited {
    color: #1760BF;
    text-decoration: none;
  }
  a:hover {
    color: #c00;
  }
.links {
  ul {

  }
  li {
   margin-bottom: 5px; 
  }
}
h4 {
  margin: 24px 0 0 0;
}

.bottom-text {
  margin-top: 40px;
  border-top: 2px solid #CCC;
  a {
    border-bottom: 1px solid #CCC;
  }
  p {
   max-width: 650px; 
  }
}

/*

I really hope you guys can help me, because i don't know what else i can do to fix this. Thanks.

回答1:

The Solution to your problem is, you didn't download the correct file for your Magnific-popup script.

You just downloaded the complete gitHub Page, not the needed css/jquery file.

You need to download this file jQuery and this CSS.

On gitHub pages you have to click the "raw" tab, to get the clean code you need for your projects.

来源：https://stackoverflow.com/questions/22438407/magnific-popup-doesnt-work-at-all

标签

jquery

html

css

magnific-popup