Jquery 放大弹出窗口'；我根本不工作_Jquery_Html_Css_Magnific Popup

Jquery 放大弹出窗口'；我根本不工作

jquery html css

Jquery 放大弹出窗口'；我根本不工作,jquery,html,css,magnific-popup,Jquery,Html,Css,Magnific Popup,我这里有些问题。我什么都试了好几天了！我已经在这里看了其他问题，试图解决我的问题，但我仍然不能使放大弹出工作我不知道我做错了什么，我搜索了谷歌、原始文档、stackoverflow问题，但我的网站没有显示弹出窗口这是我到目前为止的代码 <!DOCTYPE html> <head> <link rel="stylesheet" type="text/css" href="css/magnific-popup.css" />

我这里有些问题。我什么都试了好几天了！我已经在这里看了其他问题，试图解决我的问题，但我仍然不能使放大弹出工作

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

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

谢谢。

您的问题的解决方案是，您没有为放大弹出脚本下载正确的文件

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

你需要下载这个文件和这个

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

您能创建一个小提琴吗？我们更容易发现这个问题。我把这个库和你的css添加到了JSFIDLE中，我对JSFIDLE有点陌生，所以我希望它是正确的。这是链接：请注意，我使用了其他外部链接，它们位于外部资源面板上，因为代码非常广泛。谢谢David的例子能给你想要的吗？弹出窗口正在处理David的例子。但是我不能让它工作。。不管我做什么，即使我只是把弹出插件放在一个干净的网页上。。。这是我正在工作的实际网站：有“zoom ou”链接，但没有弹出窗口可以让它工作。谢谢最后我花了大约3-4天的时间试图解决这个问题，这是一个非常简单的解决方法（顺便说一句，我很傻）。网站的插件工作，以防你们想看到

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

/*