Как изменить свойство CSS в Magnific Popup

Я использую плагин Magnific Popup. Мой код выглядит следующим образом:

        $(".event").magnificPopup({

            items: {

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

Дело в том, что в разделе «.hidden-div», который я пытаюсь открыть, для свойства отображения CSS установлено значение none, поскольку я хочу, чтобы он отображался на странице только через всплывающее окно.

Итак, есть ли способ установить свойство отображения, чтобы сказать «блокировать», когда выполняется вышеприведенный скрипт, и установить его обратно на «нет», когда всплывающее окно закрыто?


person Navin Nagpal    schedule 06.11.2013    source источник


Ответы (2)


К вашему сведению, по дизайну вы должны добавить mfp-hide класс CSS к элементу, который должен быть скрыт. Magnific Popup автоматически переключает его на открытие/закрытие. http://dimsemenov.com/plugins/magnific-popup/documentation.html#inline_type

person Dmitry Semenov    schedule 06.11.2013
comment
Ok. Попробую и это! - person Navin Nagpal; 07.11.2013
comment
Метод в моем ответе тоже работает, но он, безусловно, лучше и проще! - person Navin Nagpal; 30.11.2013

Вот как это работает сейчас. В основном я ссылался на API здесь

$(".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
        });

Я надеюсь, что это полезно и для других! Немного не по теме, очень понравился плагин!

person Navin Nagpal    schedule 06.11.2013