fancybox — Как убрать кнопку закрытия и перетаскивание попапа

В данной заметке вы узнаете как убрать drag событие мыши и скрыть кнопку Закрыть.

Убираем touch событие в fancybox

Чтобы убрать это событие вам необходимо передать простой параметр. Чуть ниже рассмотрим пример вызова попапа «на лету». То есть физически его не будет в коде, только в js.

Параметр убирающий это событие называется touch:

'touch' : false,

Как убрать кнопку закрыть в fancybox

Чтобы убрать кнопку вы конечно можете написать стили, но это не самый лучший вариант. В зависимости от версии есть несколько способов как ее скрыть. Мне помог такой параметр:

'modal' : true,

Обратите внимание, после установки этого параметра вам нужно как-то по другому закрывать попап. Либо вешать обработчик на кнопку внутри фансибокс, либо писать js.

Как создать попап в fancybox

Для этого воспользуемся стандартным способом данной библиотеки. Полный код будет выглядеть так:

$(function(){
	$.fancybox.open([
		'Текст вашего попапа. Тут также может быть HTML написанный в 1 строку'
	],
	{
		'touch' : false,
		'modal' : true,
	}
	);
});

Как видите, мы передали не только содержимое попапа, но и параметры. При помощи параметров вы можете увеличивать и уменьшать размер окна — иногда это очень полезная опция. Подробнее о параметрах и возможностях вы можете прочитать в официальной документации — fancyapps.com.

автор: Dmitriy

Занимаюсь веб-разработкой с 2011 года. Посмотреть некоторые из моих работ, а также узнать чуть больше обо мне, вы можете на forwww.ru.

Какие услуги предоставляю:
- Создание сайтов, шаблонов и компонентов на 1С-Битрикс;
- Разработка функционала с нуля и доработка кода на уже созданных проектах;
- Адаптивная вёрстка макетов и натяжка на Битрикс;
- Парсинг файлов и выгрузка на сайт (форматы - CSV, XML, XLSX, JSON)
- Интеграции со сторонними сервисами по API;
- Многоязычные версии и многое другое.

Если у вас остались вопросы, свяжитесь со мной любым удобным для вас способом или оставьте комментарий внизу.
E-mail: dmitriyribka@gmail.com
Skype: cinemacreaterus

Добавить комментарий

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