Кнопка закрытия Magnific Pop отсутствует, когда включен модальный режим

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

$.magnificPopup.open({
        items:items,
        type:'image',
        modal:true, 
        closeOnContentClick:true, 
        closeOnBgClick:true, 
        showCloseBtn:true, 
        enableEscapeKey:true,
        gallery: {
          enabled: true,
          preload: [0,3], 
        },          
        removalDelay: 500,
        mainClass: 'mfp-fade',      
    });

Мне нужно установить modal на true, иначе галерея лайтбоксов может неожиданно закрыться. Это известная проблема, возникающая во многих лайтбоксах. Недостатком этой настройки от modal до true является то, что кнопки закрытия не работают.

Кто-нибудь в подобной ситуации нашел решение для этого?


javascript jquery magnific-popup
person kiarashi    schedule 30.10.2017    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Ты такой же, как я. Я решил эту проблему, как показано ниже.

$.magnificPopup.open({
    items: {
        src: '#modifyDialog',
        type: 'inline',
        focus: '#engTxtareaModify',
    },

    modal: true,
    fixedContentPos: true,
    callbacks: {
        open: function () {
            var html = "<button title='Close (Esc)' type='button' class='mfp-close'></button>";
            $('.modifyDialog').append(html);
        }
    }
})

Итак, вы можете проверить эти HTML-коды. И затем я добавил код css.

.mfp-close {  color: #333; }

Я надеюсь, что это поможет вам.

person BlueFlag    schedule 26.04.2018