Magnific-popup 根本不起作用答案

【问题标题】：Magnific-popup doesn't work at allMagnific-popup 根本不起作用
【发布时间】：2014-03-16 14:52:29
【问题描述】：

我在这里遇到了一些问题。我已经尝试了几天！我已经在这里查看了其他问题以尝试解决我的问题，但我仍然无法让 magnific-popup 工作。

我不知道我做错了什么，我搜索了谷歌、原始文档、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; 
  }
}

/*

我真的希望你们能帮助我，因为我不知道我还能做些什么来解决这个问题。谢谢。

【问题讨论】：

你能创建一个小提琴吗？ jsfiddle.net这个问题我们更容易找到..
我已将库和您的 css 添加到此 plnkr
我对 jsfiddle 有点陌生，所以我希望它是正确的。这是链接：jsfiddle.net/qsD25 请注意我使用了其他外部链接，它们在外部资源面板上，因为代码非常广泛。谢谢
大卫的例子有没有给你想要的？
弹出窗口正在处理 David 示例。但我不能让它工作..不管我做什么，即使我只是将弹出插件放在一个干净的网页中......这是我正在使用的实际网站：@987654326 @有“zoom-ou”链接，但没有弹窗

标签： jquery html css magnific-popup

【解决方案1】：

您的问题的解决方案是，您没有为您的 Magnific-popup 脚本下载正确的文件。

您刚刚下载了完整的 gitHub 页面，而不是所需的 css/jquery 文件。

你需要下载这个文件jQuery和这个CSS。

在 gitHub 页面上，您必须单击“原始”选项卡，才能获得项目所需的干净代码。

【讨论】：

我可以让它工作。谢谢！最后！我大约需要 3-4 天来解决这个问题，这是一个非常简单的解决方法（顺便说一句，我很傻）。带有插件的网站，以防你想看到testes-cmt.bl.ee