2016-10-13 4 views
3

Я использовал fancybox для контактной формы. и он открыт при загрузке страницы. поэтому я использовал следующий код.У меня проблема с Fancybox

jQuery.fancybox.open('#fancy'); 

Я уже пробовал, но fancybox не открывается при загрузке.

jQuery("#fancy").fancybox({ 
     openEffect : 'fade', 
     closeEffect : 'fade', 
     padding: 0, 
     helpers: { 
      overlay: { 
      locked: false 
     } 
    } 

});

Но когда я нажимаю на внешнюю сторону fancybox, мне нужно закрыть только близко.

+0

Вы используете версию 1 или 2 , плз? –

+0

Я использую версию 2 –

ответ

0

Таким образом, будет закрыто только кнопка закрытия

(function($){ 

var closeByButton = false; 

$(("#fancy").fancybox({ 
    openEffect : 'fade', 
    closeEffect : 'fade', 
    padding: 0, 
    beforeLoad : function() { 
     closeByButton = false; 
    }, 
    beforeClose: function() { 
     if(!closeByButton){ 
      return false; 
     } 
    } 
}); 

$(document).on('mouseenter','.fancybox-close', function(){ 
    closeByButton = true; 
}); 

$(document).on('mouseleave','.fancybox-close', function(){ 
    closeByButton = false; 
}); 
+0

Пожалуйста, прочитайте состояние баунти, которое я также хочу на мобильном экране. –

0

Попробуйте с опцией autoSize: true. Он также автоматически изменит размер изображения на мобильном устройстве.

Проверить Рабочий Демонстрационные Here

JS:

$(document).ready(function() { 
    $("a.fancybox").fancybox({ 
    openEffect: 'fade', 
    closeEffect: 'fade', 
    autoSize: true, 
    helpers: { 
    overlay: { 
     css: { 
     cursor: 'auto' 
     }, 
     closeClick: false 
    } 
    } 
    }).trigger("click"); 
}); 

Чтобы исправить прокрутки вопрос добавьте следующий стиль

CSS:

body .fancybox-wrap { 
    position: fixed!important; 
}