个人中心
gpt4 book ai didi

jquery - Magnific-popup 根本不起作用

转载 作者：太空宇宙 更新时间：2023-11-04 13:47:19 25 4
gpt4 key购买 nike

我遇到了一些问题。我已经尝试了好几天了!我已经在这里查看其他问题以尝试解决我的问题，但我仍然无法使 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; 
  }
}

/*

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

最佳答案

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

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

您需要下载此文件jQuery还有这个CSS .

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

关于jquery - Magnific-popup 根本不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/22438407/

25 4 0
文章推荐： java - 存储在数组中的复合类在 selenium java 中无法访问
文章推荐： c++ - 总是必须在 Windows 上的 Eclipse 中定义 PATH 变量
文章推荐： javascript - jQuery 的 val() 不适用于隐藏字段
文章推荐： java - 当我尝试在 hibernate 中创建两个主键时，我陷入困境
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com