Magnific-popup不起作用 [英] Magnific-popup doesn't work at all
本文介绍了Magnific-popup不起作用的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我不知道我在做什么， m做错了，我搜索谷歌，原始文档，stackoverflow的问题，但我的网站只是不显示弹出。
这是我有这样的代码远。
<！DOCTYPE html>
< head>
< link rel =stylesheettype =text / csshref =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'）。magnificPopup（{
delegate：'a' ，
removalDelay：500，//延迟X移除以允许出现动画
回调：{
beforeOpen：function（）{
this.st.mainClass = this.st .el.attr（'data-effect'）;
}
}，
midClick：true //允许在鼠标中键点击时打开弹出窗口，如果你不提供替代来源。
}）;
}）;
< / script>
< / head>
< body>
< h3> Magnific Popup基于CSS3的动画效果< / h3>
< div class =links>
< h4>基于文本：< / h4>
< ul id =inline-popups>
< li>< a href =＃test-popupdata-effect =mfp-zoom-out>缩小< / a>< / li>
< / ul>
<！ - Popup本身 - >
< div id =test-popupclass =white-popup mfp-with-anim mfp-hide>您可以在此放置任何HTML。这是虚拟副本。这并不意味着阅读。它被放置在这里仅仅是为了展示完成的排版文本的外观和感觉。仅适用于演出。在这里搜索意义的人会非常失望。< / div>
< / body>
< / html>
包含在我的项目中的JS和CSS文件i从此页面下载：
https://github.com / dimsemenov / Magnific-Popup / tree / master / dist
我还在我的基于这个stackoverflow问题的CSS文件：
我不能获得丰富的动画效果
这是我添加的CSS代码：
html，body {margin：0;填充：10px的; -webkit-backface-visibility：hidden;}
/ *基于文本的弹出式样式* /
.white-popup {
position：relative;
背景：#FFF;
padding：25px;
width：auto;
max-width：400px;
margin：0 auto;
}
/ *
======缩小效果======
* /
.mfp-zoom-out.mfp-bg {
-ms-filter：progid：DXImageTransform.Microsoft.Alpha（Opacity = 0）;
filter：alpha（opacity = 0）;
opacity：0;
-webkit-transition：全部0.3s缓解;
-moz-transition：全部0.3s缓解;
-o-transition：全部0.3s缓解;
-ms-transition：全部0.3s缓解;
过渡：所有0.3s缓解;
}
.mfp-zoom-out.mfp-bg.mfp-ready {
-ms-filter：progid：DXImageTransform.Microsoft.Alpha（Opacity = 80）;
filter：alpha（opacity = 80）;
不透明度：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：全部0.3s缓出;
-moz-transition：全部0.3s缓出;
-o-transition：全部0.3秒缓出;
-ms-transition：全部0.3s缓出;
过渡：全部0.3秒缓出;
-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;
$ b / *预览样式* /
html {
font-family：Calibri，Trebuchet MS，Helvetica，无衬线字体;
}
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真的希望你们能帮助我，因为我不知道我能做些什么来解决这个问题。
Thanks。
解决方案
解决您的问题的方法是，您没有下载适合您的Magnific-弹出脚本。
您刚刚下载完整的gitHub Page，而不是所需的css / jquery文件。
在gitHub页面上，您必须单击原始选项卡，才能获得项目所需的干净代码。
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.
解决方案
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.
这篇关于Magnific-popup不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
