Magnific-popup根本不起作用
我在这里有些问题。 我已经尝试了好几天了！ 我已经在这里查看其他问题以尝试解决我的问题，但我仍然不能让夸张的弹出工作。
我不知道我做错了什么，我搜索谷歌，原始文档，stackoverflow问题，但我的网站只是没有显示弹出窗口。
这是我到目前为止的代码。
$(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. }); }); Magnific Popup CSS3-based animation effects
Text-based:
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.
我的项目中包含的JS和CSS文件我从这个页面下载： https ： //github.com/dimsemenov/Magnific-Popup/tree/master/dist
我还根据这个stackoverflow问题在我的CSS文件中添加了一些额外的代码： 我无法使用magnific-popup动画来工作
这是我添加的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; } } /*
我真的希望你们能帮助我，因为我不知道还能做些什么来解决这个问题。 谢谢。
您的问题的解决方案是，您没有为Magnific-popup脚本下载正确的文件。
您刚刚下载了完整的gitHub页面，而不是所需的css / jquery文件。
你需要下载这个文件jQuery和这个CSS 。
在gitHub页面上，您必须单击“原始”选项卡，以获得项目所需的干净代码。