Как вызвать iframe fancybox с фиксированной высотой?

Вся документация на fancybox имеется на официальном сайте, однако, логичная и простая вещь иной раз может вызвать вопросы и стать мелким и неприятным препятствием на пути. Итак, если необходимо вызвать всплывающее окно fancybox с содержимым какой либо страницы, будем использовать тип iframe. Например, мы хотим вывести форму во всплывающем окне.

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

Казалось бы, чего проще:

$(document).ready(function() {
$(‘.form’).fancybox({
type: ‘iframe’,
width: 520,
height: 400
});
});

Однако, в этом случае фрейм будет растягиваться на всю высоту экрана. Нам необходимо указать, чтобы размер не был автоматическим и не подгонять его под текущий вид:

Autosize: false;
fitToView: false;

И обратите внимание, размер — это число. Его не следует обрамлять в одинарные кавычки ‘size_value ‘

В целом, код скрипта будет вот таким:

$(document).ready(function() {
$(‘.form’).fancybox({
type: ‘iframe’,
closeClick : true,
fitToView: false,
autoSize: false,
width: 520,
height: 400,
title: ‘Зарос обратного звонка’,
autosize: false,
helpers : {
title: {
type: ‘float’
},
}
});
});

Разумеется, можно описать эффекты раскрытия и закрытия окна fancybox, например:

openEffect: ‘elastic’,
openSpeed: 150,
closeEffect: ‘elastic’,
closeSpeed: 150

На этом все, скрипт вызова fancybox с фиксированными размерами готов. Таким скриптом можно вызвать форму в окне fancybox, ил поместить туда другое статичное содержимое, например — форму входа на сайт.

Всем удачи!

Zverev Alexey

3 comments

  1. Ответить

    viktor-jukov4l

    Я согласен со всем выше сказанным. Можем пообщаться на эту тему.

Добавить комментарий для Мария Пономарева Отменить ответ

Войти с помощью: 

Ваш e-mail не будет опубликован. Обязательные поля помечены *