【问题标题】:Show popup only once (magnific popup)仅显示一次弹出窗口(放大弹出窗口)
【发布时间】:2017-08-13 19:22:20
【问题描述】:

尝试每次访问仅显示一次此弹出窗口。我觉得我错过了什么

<script src="http://code.jquery.com/jquery-1.7.min.js">
<link href="http://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/magnific-popup.css" rel="stylesheet" type="text/css" media="all"/>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/jquery.magnific-popup.min.js"></script>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.0/jquery.cookie.js"></script>

<script>
$(document).ready(function() {
var check_cookie = $.cookie('bsw');
   if(check_cookie == null){
    $.cookie('bsw', 'yes', {expires: 1 });
  $('.image-link').magnificPopup({type:'image'});
});
</script>

<script>
(function($) {
    $(window).load(function () {
        // retrieved this line of code from http://dimsemenov.com/plugins/magnific-popup/documentation.html#api
        $.magnificPopup.open({
            items: {
                src: '/bsw-10-off.png'
            },
            type: 'image'

          // You may add options here, they're exactly the same as for $.fn.magnificPopup call
          // Note that some settings that rely on click event (like disableOn or midClick) will not work here
        }, 0);
    });
})(jQuery);
</script>

我没有关闭或打开某些东西吗?我觉得问题出在文档就绪功能中,但我可能是错的。任何帮助,将不胜感激。谢谢。

下面是没有cookie代码的代码

<link href="http://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/magnific-popup.css" rel="stylesheet" type="text/css" media="all"/>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/jquery.magnific-popup.min.js"></script>

<script>
$(document).ready(function() {
  $('.image-link').magnificPopup({type:'image'});
});
</script>

<script>
(function($) {
    $(window).load(function () {
        // retrieved this line of code from http://dimsemenov.com/plugins/magnific-popup/documentation.html#api
        $.magnificPopup.open({
            items: {
                src: 'http://www.barbershopwindow.com/bfimages/bsw-10-off.png'
            },
            type: 'image'

          // You may add options here, they're exactly the same as for $.fn.magnificPopup call
          // Note that some settings that rely on click event (like disableOn or midClick) will not work here
        }, 0);
    });
})(jQuery);
</script>

【问题讨论】:

  • 你从来没有提到什么是行不通的。
  • 首先,您的 cookie 代码中的 if 缺少一个右大括号。
  • 问题是它一直出现

标签: javascript jquery cookies popup


【解决方案1】:

代替:

//从http://dimsemenov.com/plugins/magnific-popup/documentation.html#api检索到这行代码

您可以在初始化 magnificPopup 后简单地触发点击事件。

此外,如果 cookie 不存在,$.cookie('bsw') 返回 undefined 且不为 null。

工作jsfiddle

$(document).ready(function () {
    var check_cookie = $.cookie('bsw');
    if (check_cookie == undefined) {
        $.cookie('bsw', 'yes', {expires: 1});
        $('.image-link').magnificPopup({type: 'image'}).trigger('click');
    }
});
<script src="https://code.jquery.com/jquery-1.12.3.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/magnific-popup.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/jquery.magnific-popup.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.0/jquery.cookie.js"></script>



<a class="image-link" href="http://farm4.staticflickr.com/3721/9207329484_ba28755ec4_o.jpg">Open popup</a>

【讨论】:

  • 在小提琴上工作但我没有准备好不是我在控制台上的网站上的功能错误
  • 看起来 jquery 会干扰页面上的其他元素
  • 更新了代码以包含页面使用的 Jquery 版本。看起来我需要使用完整的代码才能工作。现在弹出窗口显示没有问题,但 cookie 功能没有
  • @MHeredia 你尊重图书馆的顺序和版本吗?见 sn-p 或小提琴
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 2017-10-15
  • 1970-01-01
  • 1970-01-01
  • 2022-12-14
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多