我不知道我做错了什么，我搜索了谷歌，原始文档，stackoverflow问题，但我的网站没有显示弹出窗口。
这是我到目前为止的代码。
<!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>
我的项目中包含的JS和CSS文件我从这个页面下载： https://github.com/dimsemenov/Magnific-Popup/tree/master/dist
我还根据此stackoverflow问题在我的CSS文件中添加了一些额外的代码： I can't get magnific-popup animations to work
这是我添加的CSS代码：
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;
}
}
/*
我真的希望你们能帮助我，因为我不知道还能做些什么来解决这个问题。 感谢。