jquery - 如何在 Magnific Popup 中更改 CSS 属性

Question

我正在使用 Magnific Popup 插件。我的代码如下 -

        $(".event").magnificPopup({

            items: {

                src: ".hidden-div",
                type: "inline"
            },
            closeBtnInside: true
        });

问题是我试图弹出的“.hidden-div”部分，它的 CSS 显示属性设置为 none，因为我希望它只能通过弹出窗口在页面上可见。

那么有没有办法在执行上述脚本时将其显示属性设置为“阻止”，并在弹出窗口关闭时将其设置回“无”？

Answer 1

This is the way it is working now. Basically I refered the API here

$(".event").magnificPopup({

            callbacks: {
                open: function(){

                    $(".hidden-div").css("display", "block");
                },
                close: function(){

                    $(".hidden-div").css("display", "none");
                }
            },

            items: {

                src: ".hidden-div",
                type: "inline"
            },
            closeBtnInside: true
        });

I hope it is of use to others too ! Slightly off topic, really like the plugin !

Answer 2

仅供参考，按照设计，您应该将mfp-hideCSS 类添加到应该隐藏的元素中。Magnific Popup 将自动将其切换为打开/关闭。http://dimsemenov.com/plugins/magnific-popup/documentation.html#inline_type