Создание, контроль и настройка лучшего модального окна для вашего сайта с помощью Vex

Модальное окно очень полезно, когда вы хотите, чтобы пользователи взаимодействовали с вашим сайтом. Иногда модальное окно называется модальным окном, поскольку оно используется для отображения диалогового окна. В предыдущей статье мы провели руководство по созданию модальных окон с помощью Bootstrap Plugin.

В этой статье мы познакомим вас с еще одним замечательным помощником для создания модальных окон, использующим библиотеку jQuery, а именно Vex.

сердить является полной и настраиваемой библиотекой Javascript, которая помогает вам с легкостью создавать модальные окна. Этот легкий плагин jQuery заменяет собственное диалоговое окно браузера.

Основные настройки

Для начала нам нужно подготовить скрипт Vex. Вы можете скачать его Вот, Затем включите в заголовок последнюю версию jQuery с помощью следующего сценария.

Чтобы использовать Vex, вы должны включить файлы vex.js и vex.css. Вместо использования vex.js и vex.dialog.js вы можете просто включить vex.combined.js или vex.combined.min.js.

Теперь мы добавим эти библиотеки Vex в заголовок следующим образом.

В приведенном выше сценарии я включаю vex-theme-os.css, которая представляет собой другую готовую тему Vex. Чтобы использовать другую тему, вы можете увидеть документацию, включенную в демо Вот,

Применяя Vex

Основными методами в Vex являются vex.dialog.alert, vex.dialog.confirm и vex.dialog.prompt. И есть vex.dialog.open, который является комбинацией этих методов для более продвинутого использования, например. создать форму, логин или несколько модальных окон.

А теперь мы попытаемся создать простое модальное окно входа в систему, используя метод vex.dialog.open. Прежде чем мы начнем с метода, мы должны сначала применить тему, которую мы использовали, с параметром defaultOptions.className. Чтобы применить тему, вы можете легко добавить название темы в качестве значения параметра, например, так.

vex.defaultOptions.className = ‘vex-theme-os’;

Для получения дополнительной документации по API опций, вы можете обратиться к Vex расширенная страница,

Как упоминалось ранее, метод vex.dialog.open представляет собой комбинацию из 3 других методов. Следующий код представляет собой более сложную демонстрацию, в которой мы вызываем функцию оповещения, подтверждения и внутренней подсказки для создания диалога входа в систему.

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

Последняя мысль

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

Vex также поставляется с готовыми темами, чтобы диалог соответствовал вашему стилю, будь то на CSS или SASS. Он также совместим с большинством современных браузеров и очень легок — только под минимизированную 7 КБ (минимизированная 2 КБ + gzipped).