Jquery модальные окна: Модальное окно на затемненном фоне jQuery

 
    
 
    
 
   jquery.com/ui/1.12.1/themes/base/jquery-ui.css ">  
 
    
 
  < script src = "https://code.jquery.com/jquery-1.12.4.js">   
 
    
 
  
  
 
  
 Это диалоговое окно по умолчанию, которое полезно для отображения информации.Диалоговое окно можно перемещать, изменять его размер и закрывать с помощью 'x'; значок. 
  
 

Хотите узнать больше о виджете диалога? Проверьте Документация по API.

18 подключаемых модулей модального окна с открытым исходным кодом, созданных с помощью CSS, JavaScript и jQuery

[Примечание редактора: в более ранней версии этой статьи перечислялись 67 подключаемые модули модального окна. Это было похоже на ….много. Мы сократили список до 18 элементов, потому что иногда меньше — значит больше.]

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

Модальные окна часто разрабатываются со слоем прозрачности позади них, обеспечивая обзор главного экрана, но они также могут занимать весь экран и привлекать все внимание (это полезно для критически важных вещей, таких как удаление учетной записи).Обратите внимание, что для высококонтекстной информации, обзоров продуктов и т. Д. Вы можете использовать всплывающие подсказки. Чтобы узнать больше об использовании модальных окон, ознакомьтесь с нашей статьей о том, как правильно использовать этот полужирный шаблон пользовательского интерфейса.

Вы можете создавать модальные окна без кода с помощью Appcues. Не для того, чтобы хвастаться, но наш собственный продукт — это действительно отличный способ создать великолепные настраиваемые модальные окна (и многое другое), которые улучшают пользовательский интерфейс и взаимодействие с пользователем — и все это без проблем с вашей командой разработчиков.

Но мы признаем, что иногда строительство собственными силами имеет смысл.Если вы посчитали и решили пойти по пути с открытым исходным кодом, вот 18 вариантов, которые вам помогут:

1. jQuery Modal

Язык (и): jQuery
‍ Что нам в нем нравится : Простой, легкий, доступный модальный jQuery. Простая разметка позволяет легко стилизовать, добавлять анимацию затухания и прикреплять настраиваемое поведение с помощью событий jQuery. Минимизировано около 1 КБ.

2. animatedModal.js

Язык (и): JavaScript
‍ Что нам в нем нравится: Полноэкранные модальные окна с анимированными переходами.Поставляется с большой библиотекой эффектов анимации и API для настройки. Здорово, что вы хотите оказать большое влияние.

3. jBox jQuery Plugin

Язык (и): jQuery
Что нам в нем нравится: Мощный и гибкий плагин jQuery, который включает модальные окна, всплывающие подсказки и уведомления в приложении с множественной анимацией и взаимодействием опции.

‍

Язык (и): JavaScript, CSS
‍ Что нам в нем нравится: Красивое всплывающее окно, заменяющее всплывающие предупреждения Javascript.Настраиваемый, ответственный, доступный (WAI-ARIA) и с нулевыми зависимостями. Включает параметры для запросов AJAX, несколько связанных модальных окон, настраиваемую анимацию и поддержку языков с письмом справа налево.

5. Modal.js для Bootstrap

Язык (и): JavaScript
‍ Что нам в нем нравится: Популярный вариант с открытым исходным кодом для создания модальных диалогов. Вы устанавливаете модальные окна для открытия при нажатии кнопки, включаете / выключаете плавную анимацию, используете систему сетки Bootstrap в модальном окне и даже всплывающие подсказки появляются в самом модальном окне.

6. Диалоги Vex

Язык (и): CSS, JavaScript
‍ Что нам в нем нравится: Чистые, современные и легко настраиваемые модальные диалоги. Предлагает несколько тем, анимаций, наложений и т. Д. С простым API для менее 7 КБ.

7. Адаптивные модальные окна дизайна материалов

Язык (и): CSS, JavaScript
‍ Что нам в нем нравится: Чистые, современные, адаптивные модальные окна, вдохновленные материальным дизайном, с красивыми большими кнопками и анимацией — нет Требуется jQuery.

8. Featherlight.js

Язык (и): jQuery
‍ Что нам в нем нравится: Легкий, серьезный, простой плагин для лайтбоксов для профессионалов, которые знают, что делают. Всего 400 строк JS и 100 CSS — вместе менее 6 КБ

9. Базовое модальное окно только для CSS

Язык (и): CSS
‍ Что нам в нем нравится: Простое небольшое модальное окно только для CSS на основе псевдокласса: target.

10. Avgrund Modal

Язык (и): jQuery
‍ Что нам в нем нравится: Уникальный скрипт, который сжимает весь фоновый экран при появлении модального окна.Интересный эффект, который лучше всего использовать экономно.

11. iziModal.js

Язык (и): jQuery
‍ Что нам в нем нравится: Плагин большего размера, который предлагает десятки гладких анимаций, модальные окна с вкладками (для форм входа / регистрации) и отличные UI / UX эффекты. Полностью отзывчивый и настраиваемый.

12. Boardal — модальный интерфейс для Vue.js

Язык (и): CSS, JavaScript
‍ Что нам в нем нравится: Создан специально для процессов адаптации пользователей с несколькими модальными окнами. Включает опции для индикаторов прогресса, кнопок вперед / назад, прокрутки контента и горизонтальных / вертикальных переходов между контентом.

13. ARIA modal

Язык (и): jQuery
‍ Что нам в нем нравится: Простой и легкий плагин jQuery, разработанный с учетом специальных возможностей. Работает для всех браузеров, устройств и входов.

14. Morphing Modal

Язык (и): CSS, jQuery
‍ Что нам в нем нравится: Очень гладкое полноэкранное модальное окно, которое открывается с помощью кнопки CTA.На основе CSS-переходов и преобразований, jQuery и Velocity JavaScript.

15. Tingle

Язык (и): JavaScript
‍ Что нам в нем нравится: Неудачное название для замечательного простого модального плагина, написанного на чистом JavaScript. Никаких зависимостей, полностью настраиваемый через CSS и простой API.

16. Модальные окна на основе Flexbox

Язык (и): CSS, JavaScript
‍ Что нам в нем нравится: Простые, отзывчивые модальные окна на основе Flexbox с опциями для передачи атрибутов данных в модальные окна.Анимированные модальные заголовки и меню значков выделяют эти модальные окна.

17. Modaal

Язык (и): CSS, jQuery
‍ Что нам в нем нравится: Гибкий, полностью отзывчивый модальный плагин, доступный для WCAG 2.0 уровня AA. Настраиваемый CSS с параметрами SASS.

‍

Язык (и): CSS, JavaScript
‍ Что нам в нем нравится: Симпатичное модальное окно с современными стилями и переходами анимации.Незаметный отскок добавляет приятный штрих к простому короткому сообщению.

Psst — Ищете всплывающие подсказки с открытым исходным кодом? Мы тоже составили список!

‍

kylefox / jquery-modal: Самый простой из возможных модальных окон для jQuery

Простой и легкий метод отображения модальных окон с помощью jQuery.

Для быстрых примеров и демонстраций посетите jquerymodal.com.

Большинство плагинов, которые я нашел, пытаются сделать слишком много и имеют специальные способы работы с фотогалереями, фреймами и видео.Получающиеся в результате HTML и CSS часто бывают раздутыми и их сложно настроить.

Напротив, этот плагин обрабатывает два наиболее распространенных сценария, с которыми я сталкиваюсь.

• отображение существующего элемента DOM
• загрузка страницы с помощью AJAX

и использует как можно меньше HTML и CSS.

Вы можете установить jquery-modal с помощью npm:

npm установить jquery-modal

или с Bower:

bower установить jquery-modal

или используйте размещенную версию от cdnjs:

Используете рельсы? Оцените плагин jquery-modal-rails!

Требования jQuery: Начиная с версии 0.3.0, требуется jQuery 1.7.Если вы используете более раннюю версию jQuery, вы можете использовать тег v.0.2.5.

Конфликт имен с Bootstrap: Модальное окно Bootstrap использует то же пространство имен $ .modal . Если вы хотите использовать jquery-modal с Bootstrap, самое простое решение — вручную изменить имя этого плагина.

Метод 1. Автоматическое присоединение к ссылкам

Самый простой подход — добавить rel = "modal: open" к вашим ссылкам и использовать атрибут href , чтобы указать, что открывать в модальном окне.

Открыть существующий элемент DOM по ID:

 <форма>
  . ..


 Войти  

Загрузить удаленный URL-адрес с помощью AJAX:

  Войти  

Метод 2: вручную

Вы можете вручную открыть модальное окно, вызвав метод .modal () для элемента:

 <форма>
  ...
 

 $ ('# форма входа'). Modal (); 

Вы также можете вызвать .modal () прямо по ссылкам:

  Открыть элемент DOM 
 Откройте модальное окно AJAX  

 $ ('a [модальные данные]'). Click (function (event) {
  $ (это) .modal ();
  вернуть ложь;
}); 

Откат совместимости

Вы можете предоставить чистый запасной вариант для пользователей, у которых отключен JavaScript, вручную прикрепив модальное окно с помощью атрибута data-modal . Это позволяет вам писать ваши ссылки, указывающие на href как обычно (резерв), при включении модальных окон, в которых включен JavaScript.

 
 Войти 



  ...



<сценарий>
  $ (function () {
    $ ('a [модальные данные]'). on ('click', function () {
      $ ($ (это). данные ('модальный')). модальный ();
      вернуть ложь;
    });
  });
 

Переходы с исчезновением

По умолчанию наложение и окно появляются мгновенно, но вы можете включить эффект затухания, указав параметр fadeDuration .

 $ ('a.open-modal'). Click (function (event) {
  $ (this) .modal ({
    fadeDuration: 250
  });
  вернуть ложь;
}); 

Будет плавно переходить в режим наложения и в модальном режиме в течение 250 миллисекунд одновременно. Если вы хотите, чтобы эффект наложения появлялся перед окном, вы можете указать опцию fadeDelay . Это указывает, в какой момент во время перехода наложения должен начаться переход окна.

Итак, если вы хотите, чтобы окно исчезло, когда наложение было завершено на 80%:

 $ (вяз).модальный ({
  fadeDuration: 250,
  fadeDelay: 0.80
}); 

Или, если вы хотите, чтобы окно исчезло через несколько мгновений после полного завершения перехода наложения:

 $ (вяз) .modal ({
  fadeDuration: 250,
  fadeDelay: 1.5
}); 

Параметр fadeDelay применяется только при открытии модального окна. При закрытии модального окна и модальное окно, и наложение исчезают одновременно в соответствии с настройкой fadeDuration .

Затухание — единственный поддерживаемый переход.

Поскольку одновременно может быть активным только одно модальное окно, нет необходимости выбирать, какое модальное окно закрывать:

Подобно тому, как ссылки могут быть автоматически привязаны к открытым модальным окнам, их можно привязать к закрытым модальным окнам с помощью rel = "modal: close" :

  Закрыть окно  

(обратите внимание, что модальные окна, загруженные с помощью AJAX, удаляются из DOM при закрытии).

• Используйте $ .modal.isActive () , чтобы проверить, отображается ли модальное окно в настоящее время.
• Используйте $ .modal.getCurrent () для получения ссылки на текущий активный модальный экземпляр, если таковой имеется.

Это поддерживаемые параметры и их значения по умолчанию:

 $ .modal.defaults = {
  closeExisting: true, // Закрываем существующие модальные окна. Установите значение false, если вам нужно сложить несколько модальных экземпляров.
  escapeClose: true, // Позволяет пользователю закрыть модальное окно, нажав `ESC`
  clickClose: true, // Позволяет пользователю закрыть модальное окно, щелкнув наложение
  closeText: 'Close', // Текстовое содержимое для тега close . closeClass: '', // Добавляем дополнительные классы в закрывающий тег .
  showClose: true, // Показывает значок / ссылку (X) в правом верхнем углу
  modalClass: "modal", // Класс CSS добавлен к элементу, отображаемому в модальном окне.
  blockerClass: "modal", // CSS-класс добавлен в оверлей (блокировщик).

  // HTML добавляется к счетчику по умолчанию во время запросов AJAX.
  spinnerHtml: '
 
 
 
 
 
 
 
',

  showSpinner: true, // Включение / отключение счетчика по умолчанию во время запросов AJAX.fadeDuration: null, // Количество миллисекунд, которое занимает переход затухания (null означает отсутствие перехода)
  fadeDelay: 1.0 // Укажите во время постепенного появления наложения, что модальное окно начинает исчезать (0,5 = 50%, 1,5 = 150% и т. д.)
}; 

Следующие события запускаются для модального элемента в различных точках цикла открытия / закрытия (см. Ниже события AJAX).

 $ .modal.BEFORE_BLOCK = 'модальный: до блока'; // Срабатывает непосредственно перед появлением оверлея (блокировщика).
$ .modal.BLOCK = 'модальный: блок'; // Срабатывает после того, как наложение (блок) становится видимым.$ .modal.BEFORE_OPEN = 'модальный: до открытия'; // Срабатывает непосредственно перед открытием модального окна.
$ .modal.OPEN = 'модальный: открытый'; // Срабатывает после завершения открытия модального окна.
$ .modal.BEFORE_CLOSE = 'модальный: до закрытия'; // Срабатывает, когда модальное окно было запрошено на закрытие.
$ .modal.CLOSE = 'модальный: закрыть'; // Срабатывает, когда модальное окно начинает закрываться (включая анимацию).
$ .modal.AFTER_CLOSE = 'модальный: после закрытия'; // Срабатывает после полного закрытия модального окна (включая анимацию).

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

 модал. $ Elm; // Исходный объект jQuery, для которого был вызван modal ().
modal.options; // Параметры, переданные в модальное окно. 
модальный. $ blocker; // Элемент наложения.
модальный. $ anchor; // Элемент привязки, являющийся источником события. 

Итак, вы можете сделать что-то вроде этого:

 $ ('# Purchase-form'). On ($. Modal.BEFORE_CLOSE, function (event, modal) {
  clear_shopping_cart ();
}); 

Базовая поддержка

jQuery Modal использует $.get для базовой поддержки AJAX. Простой счетчик будет отображаться по умолчанию (если вы включили modal.css) и будет иметь класс modal-spinner . Если вы установили опцию modalClass , вместо этого счетчик будет иметь префикс с этим именем класса.

Вы можете добавить текст или дополнительный HTML-код к счетчику с помощью параметра spinnerHtml или полностью отключить счетчик, установив showSpinner: false .

Спиннер по умолчанию взят из превосходного SpinKit от Tobias Ahlin 👍

События

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

 $ .modal.AJAX_SEND = 'модальный: ajax: send';
$ .modal.AJAX_SUCCESS = 'модальный: ajax: успех';
$ .modal.AJAX_FAIL = 'модальный: ajax: fail';
$ .modal.AJAX_COMPLETE = 'модальный: ajax: complete'; 

Обработчики не получают аргументов. События запускаются на элементе , который инициировал модальное окно AJAX.

Более продвинутая обработка AJAX

Хорошая идея — обеспечить более надежную обработку AJAX, в частности обработку ошибок. Вместо размещения несметного числа $.Параметры ajax , которые предоставляет jQuery, jquery-modal позволяет напрямую изменять сам запрос AJAX.

Просто пропустите обработку AJAX по умолчанию (т. Е .: не используйте rel = "modal" )

  Щелкните меня!  

и сделайте запрос AJAX в обработчике кликов ссылки. Обратите внимание, что вам нужно вручную добавить новый HTML / модальный код в ответ success :

 $ ('a [rel = "ajax: modal"]').  Click (function (event) {

  $.ajax ({

    url: $ (this) .attr ('href'),

    успех: функция (newHTML, textStatus, jqXHR) {
      $ (новыйHTML) .appendTo ('тело'). модальный ();
    },

    error: function (jqXHR, textStatus, errorThrown) {
      // Обработка ошибок AJAX
    }

    // Здесь можно подробнее настроить AJAX.

  });

  вернуть ложь;
}); 

Обратите внимание, что при использовании второго (ручного) метода ответ AJAX должен быть заключен в div с модальным классом .

Нашли ошибку? MEH!

Шучу. Пожалуйста, создайте проблему и включите общедоступную демонстрацию ошибки. Dropbox или JSFiddle хорошо подходят для демонстрации воспроизводимых ошибок, но вы можете использовать все, что угодно, если оно общедоступно. Ваша проблема с большей вероятностью будет решена / объединена, если она включает в себя запрос на исправление и извлечение.

Есть идея улучшить jquery-modal? Отлично! Разветвите этот репозиторий, реализуйте свою идею (включая документацию, если необходимо) и отправьте запрос на перенос.

Я не использую эту библиотеку так часто, как раньше, поэтому, если вы хотите увидеть исправление / улучшение, лучше всего отправить запрос на перенос. Ошибки без тестового примера и / или улучшения без запроса на вытягивание не будут пощады и закрыты!

Требуются ремонтники

Эта библиотека стала более популярной и активной, чем я ожидал, и, к сожалению, у меня нет времени на ее обслуживание.

Если вы заинтересованы в том, чтобы помочь мне поддерживать эту библиотеку, дайте мне знать — Я буду рад вашей помощи!

Подробнее о том, как стать специалистом по обслуживанию »

Мне особенно нужны люди, которые были бы в восторге от работы над совершенно новым jQuery Modal 2.0 . См. Мое предложение для jQuery Modal 2.0 для получения более подробной информации и обсуждения.

Как внести свой вклад

Я приветствую улучшения этого плагина, в частности:

• Улучшения производительности
• Сделать код максимально кратким / эффективным
• Исправления ошибок и совместимость с браузерами

Разветвите и отправьте запросы на вытягивание или создайте проблему. Имейте в виду, что дух этого плагина — минимализм , поэтому я очень требователен к добавлению новых функций .

Советы по разработке / участию

• Убедитесь, что зависимости установлены: npm install
• После изменения jquery.modal.js и / или jquery.modal.css , вы можете при желании регенерировать уменьшенные файлы с помощью gulp min и gulp css соответственно.
• При необходимости убедитесь, что у вас обновлена ​​документация ( README.md и / или examples / index.html ). Запросы на извлечение без обновлений документации будут отклонены.
Сопровождающие
• должны увеличивать номера версий и запускать журнал изменений gulp при вырезании нового выпуска.

Задайте вопрос на StackOverflow. Также доступна коммерческая поддержка по электронной почте — пожалуйста, свяжитесь с [email protected], чтобы узнать цены. К сожалению, я не могу предоставить бесплатную поддержку по электронной почте.

jQuery Modal распространяется под [лицензией MIT] (подробнее см. Http://opensource.org/licenses/mit-license.php):

  Copyright (c) 2012 Кайл Фокс

Разрешение предоставляется бесплатно любому лицу, получившему
копию этого программного обеспечения и связанных файлов документации (
«Программное обеспечение») для работы с Программным обеспечением без ограничений, включая
без ограничения права на использование, копирование, изменение, объединение, публикацию,
распространять, сублицензировать и / или продавать копии Программного обеспечения, а также
разрешить лицам, которым предоставляется Программное обеспечение, делать это, при условии
следующие условия:

Вышеупомянутое уведомление об авторских правах и это уведомление о разрешении должны быть
включены во все копии или существенные части Программного обеспечения. ПРОГРАММНОЕ ОБЕСПЕЧЕНИЕ ПРЕДОСТАВЛЯЕТСЯ «КАК ЕСТЬ», БЕЗ КАКИХ-ЛИБО ГАРАНТИЙ.
ЯВНЫХ ИЛИ ПОДРАЗУМЕВАЕМЫХ, ВКЛЮЧАЯ, НО НЕ ОГРАНИЧИВАЯСЬ ​​ГАРАНТИЯМИ
КОММЕРЧЕСКАЯ ЦЕННОСТЬ, ПРИГОДНОСТЬ ДЛЯ КОНКРЕТНОЙ ЦЕЛИ И
НЕСООТВЕТСТВИЕ. НИ ПРИ КАКИХ ОБСТОЯТЕЛЬСТВАХ АВТОРЫ ИЛИ ВЛАДЕЛЬЦЫ АВТОРСКИХ ПРАВ НЕ ДОЛЖНЫ БЫТЬ
ОТВЕТСТВЕННОСТЬ ЗА ЛЮБЫЕ ПРЕТЕНЗИИ, УБЫТКИ ИЛИ ДРУГИЕ ОТВЕТСТВЕННОСТЬ В ДЕЙСТВИИ
ДОГОВОРА, ПРАВОНАРУШЕНИЯ ИЛИ ИНОГО СЛУЧАЯ, ВЫВОДЯЩИХСЯ ИЗ, ИЗ ИЛИ В СВЯЗИ
С ПРОГРАММНЫМ ОБЕСПЕЧЕНИЕМ ИЛИ ИСПОЛЬЗОВАНИЕМ ПРОГРАММНОГО ОБЕСПЕЧЕНИЯ ИЛИ ДРУГИМИ ДЕЙСТВИЯМИ.
  

14 Модальные диалоговые окна jQuery

Отличный способ показать пользователям быструю информацию — использовать модальные диалоговые окна jQuery или окна.Диалоговые окна также можно использовать, чтобы предупреждать их о предупреждениях, ошибках и многом другом. Если все сделано правильно, красивые диалоги могут стать простым способом сделать ваш сайт более современным без особых дополнительных усилий.

Многие фреймворки, такие как Twitter Bootstrap или Zurb Foundation, будут включать модальные окна и диалоги. Однако, если все, что вам нужно, это великолепно выглядящее, простое в использовании модальное окно без создания собственного с нуля, существует множество библиотек, которые могут вам помочь.

Вот вам несколько модальных диалоговых окон, наслаждайтесь!

Обновление 12 декабря 2013 г .: Обновлены все плагины в этом посте и добавлены новые изображения демоверсий.Удалены недостающие плагины и добавлены новые. Их сейчас 18 приличных.

Обновление 10 марта 2016 г .: Список плагинов полностью обновлен и обновлен. Если вы еще не используете jQuery, перейдите к разделу бонусов для библиотек JavaScript, которые в нем не нуждаются!

1. vex

Легко стилизованный, легко настраиваемый и мобильный, vex — одно удовольствие в использовании. Начните использовать vex в своих проектах как простую замену, не конфликтуя с другими библиотеками или плагинами, которые вы, возможно, установили. Придайте своему сайту современный вид.

Домашняя страница / Демо | GitHub

2. animatedModal.js

animatedModal.js — это плагин jQuery для создания полноэкранного модального окна с переходами CSS3. Вы можете использовать переходы из animate.css или создавать свои собственные переходы.

Домашняя страница / Демо | GitHub

3. Ремодал

Remodal — это отзывчивый, легкий и полностью настраиваемый плагин модального окна с декларативной конфигурацией и отслеживанием хэшей.Вы также можете определить контейнер фона для модального окна (чтобы создавать такие эффекты, как размытие). Он также поддерживает IE8.

Домашняя страница / Демо | GitHub

4. Avgrund Modal

Ищете что-то немного другое? Авгрунд может вас прикрыть. Настройки по умолчанию создают уникальный эффект, который не только добавляет анимацию к модальному окну, но и к самой странице, элегантно создавая иллюзию глубины. Лучший способ увидеть, как это выглядит, — это самому проверить демонстрацию по ссылкам ниже.

Домашняя страница / Демо | GitHub

5. ноти

Кто сказал, что модальные окна нужно центрировать? По умолчанию noty находится на одном уровне с верхней частью экрана (с возможностью легко устанавливать различные положения). Другие модальные диалоги могут достичь этого эффекта, поэтому он не обязательно уникален, но не делает его очень простым в настройке.

Домашняя страница / Демо | GitHub

6. Lean Modal

Если вы используете jQuery, но все же хотите что-то легкое, Lean Modal будет скудным и подлым.При размере всего 1 КБ, без лишнего CSS, вы даже не заметите, что Lean Modal присутствует.

Домашняя страница / Демо | GitHub

7. Всплывающее окно jQuery

Устали выскакивать? Попробуйте открыть страницу для разнообразия. По умолчанию jQuery Popdown, и только анимация входит сверху в наш список. Недостаток документации и возможностей настройки компенсируется простотой.

Домашняя страница / Демо | GitHub

8. Диалог пользовательского интерфейса jQuery

jQuery UI — это хорошо поддерживаемый, широко используемый, легко настраиваемый, легкий интерфейсный фреймворк на основе jQuery.Вся структура включает в себя гораздо больше, чем просто модальные окна, но если все, что вам нужно, это диалоговые окна, каждый модуль платформы можно легко использовать индивидуально со страницы загрузки.

Домашняя страница / Демо | GitHub

9. Colorbox

Разработанный как плагин лайтбокса для отображения изображений, Colorbox может элегантно удовлетворить потребности как лайтбокса, так и модальной диалоговой системы.

Домашняя страница / Демо | GitHub

10. BlockUI

Хотя каждый плагин в этом списке поддерживает Ajax, BlockUI создан для него.Это позволяет разработчикам моделировать синхронное поведение с помощью Ajax без блокировки браузера. BlockUI добавляет элементы в DOM, чтобы придать ему вид и поведение блокировки взаимодействия с пользователем.

Домашняя страница / Демо | GitHub

11. jQuery Modal

Недостаток креативного именования компенсируется поддержкой браузером. В документации утверждается, что даже поддерживается текстовый браузер Lynx. Но не путайте, jQuery Modal не является частью проекта jQuery.

Домашняя страница / Демо | GitHub

12. nyroModal

Нравится ли вам индивидуализация? Что ж, позвольте представить вам nyroModal. Многие другие плагины в этом списке допускают большую настройку, но nyroModal разработан с учетом того, что предоставляет разработчику большую свободу, вплоть до анимации.

Домашняя страница / Демо | GitHub

13. jqModal

Исходный код jqModal, содержащий всего около 375 строк кода, включая комментарии, очень прост и понятен.Это отличный вариант, если вы хотите самостоятельно копаться в исходном коде.

Домашняя страница / Демо | GitHub

14. Зебра Диалог

Плоская тема по умолчанию в Zebra выглядит фантастически, но вы можете настроить ее самостоятельно!

Домашняя страница / Демо | GitHub

Бонус: rmodal

Хотите что-то, в котором не используется jQuery, но при этом он легковесен и отлично выглядит? Возможно, вы нашли то, что ищете. Имея размер 3 КБ и не зависящий от jQuery, rmodal — самый легкий вариант в нашем списке.

Домашняя страница / Демо | GitHub

Бонус: SweetAlert

SweetAlert, возможно, не самый легкий модальный файл в нашем списке (17 КБ), но он самый популярный. Однако для этого не нужен jQuery. Если ваш сайт небольшой и единственная причина, по которой вы рассматриваете использование jQuery, — это добавление диалогового окна, 17 КБ намного меньше, чем вся библиотека jQuery, которая может составлять сотни килобайт. Sweet Alert тоже выглядит действительно отлично.

Домашняя страница / Демо | GitHub

29 jQuery Modal / Dialog Windows

Коллекция бесплатных jQuery модальных / диалоговых окон примеров и плагинов для рекламы, форм и простых сообщений.Обновление ноябрьской коллекции 2019 года. 8 новинок.

1. CSS Модальные окна
2. Начальная загрузка Windows

1. Примеры модального / диалогового окна jQuery
2. Модули модальных / диалоговых окон jQuery

Автор

• Брайан Хаферкамп
• 30 сентября 2020

О коде

Modal с фоновым фильтром

Используя фоновый фильтр , мы можем создать слой фильтра при открытии модального окна.Легко создавайте типичный затемненный фон, но вы также можете создавать некоторые интересные эффекты, объединяя фильтры.

Совместимые браузеры: Chrome, Edge, Opera, Safari

отзывчивый: да

Зависимости: material-design-iconic-font. css

Автор

• Hikka_666
• 29 сентября 2020

О коде

Модальный

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

отзывчивый: да

Зависимости: font-awesome.css

Автор

• Сантош Сингх Чаухан
• 12 августа 2020

О коде

Модальное окно содержимого

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

отзывчивый: да

Зависимости: font-awesome.css

Сделано с

• HTML (мопс) / CSS (SCSS) / JS

О коде

Дизайн пользовательского интерфейса: отправить открытку

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

отзывчивый: да

Зависимости: простые иконки-строки.css

Сделано с

• HTML (мопс) / CSS (стилус) / JS

О коде

Модальный

Скользящее модальное окно, созданное с помощью jQuery.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

отзывчивый: да

Зависимости: jquery.js

Автор

• Дэвид Фитас
• 13 января 2016

О коде

Простое модальное окно jQuery

Простое модальное окно с плавными переходами CSS3.Обычно используется для просмотра раздражающе важного контента при посещении веб-сайта.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Адаптивный: нет

Зависимости: jquery.js

Автор

• Брайс Снайдер
• 30 августа 2015

О коде

Модальное окно jQuery с анимацией

Успешно и неверно модальное окно с анимацией.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

отзывчивый: да

Зависимости: bootstrap.css, jquery.js

О коде

Анимированный модальный блок

Анимированное полноэкранное модальное окно.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

отзывчивый: да

Зависимости: jquery.js

Автор

• Майкл Смит
• 17 февраля 2015 г.

О коде

Модальный поворотный

Забавная маленькая модальная концепция в jQuery.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Адаптивный: нет

Зависимости: font-awesome.css, jquery.js

Автор

• Лего гриб
• 30 декабря 2014 г.

Сделано с

• HTML / CSS (Stylus) / JS (CoffeeScript)

О коде

Концепция разрушения модального окна

Небольшой эксперимент, как взорвать любой HTML-элемент.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Адаптивный: нет

Зависимости: jquery.js, howler.js, html2canvas.js

О коде

Физика модальной анимации

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

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

отзывчивый: да

Зависимости: font-awesome.css, jquery.js

Автор

• Макс Журкин
• 4 января 2020 г.

О коде

Простое модальное окно jQuery

Очень простой адаптивный модальный плагин jQuery.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

отзывчивый: да

Зависимости: —

Автор

• Армино Попп
• 24 ноября 2019

О коде

Подключаемый модуль jQuery Timed Dialog

Плагин jQuery для создания временного модального диалога.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

отзывчивый: да

Зависимости: —

Автор

• Рынок кодирования
• 19 ноября 2019

О коде

Модальная коробка

Модальное окно с использованием HTML, CSS и jQuery.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

отзывчивый: да

Зависимости: —

Автор

• Никола Стаматович
• 19 августа 2019

О коде

Модально

Простой плагин jQuery для вложенных модальных окон.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

отзывчивый: да

Зависимости: —

• Дмитрий Воронянский
• 26 августа 2012 г.

Avgrund

Avgrund — это плагин jQuery для модальных окон и всплывающих окон. Он использует новую концепцию отображения глубины между всплывающим окном и страницей.Он работает во всех современных браузерах и постепенно ухудшается в тех, которые не поддерживают переходы и преобразования CSS.

• Марсело Дольче
• 15 апреля 2016 г.

iziModal

com/dolce/iziModal»> Элегантный, отзывчивый, гибкий и легкий модальный плагин с jQuery.

• Кайл Фокс
• 18 сентября 2010 г.

jQuery Modal

Простой и легкий метод отображения модальных окон с помощью jQuery.

• Жоау Перейра
• 27 февраля 2015 г.

Анимированный модальный

animatedModal.js — это плагин jQuery для создания полноэкранного модального окна с переходами CSS3. Вы можете использовать переходы из animate.css или создавать свои собственные переходы.

• Vast Engineering
• 21 января 2013 г.

Наложение всплывающего окна jQuery

jQuery для адаптивных и доступных модальных окон и всплывающих подсказок.

bPopup

bPopup — это легкий модальный всплывающий плагин jQuery (всего 1,34 КБ в сжатом виде). Он не создает и не стилизует ваше всплывающее окно, но предоставляет вам всю логику, такую ​​как центрирование, модальное наложение, события и многое другое. Это дает вам множество возможностей для настройки, чтобы она соответствовала вашим потребностям.

• Александр Руденко
• 6 мая 2012 г.

OmniWindow

OmniWindow — чрезвычайно настраиваемый модальный плагин для jQuery.

• Стефан Габос
• 8 апреля 2013 г.

Зебра_диалог

Небольшой компактный плагин jQuery с широкими возможностями настройки для создания модальных диалоговых окон.

jquery-plain Модальный

Простой плагин jQuery для полностью настраиваемых модальных окон.

• Скотт О’Хара
• 24 сентября 2015 г.

Доступный модальный диалог

Модальное окно jQuery a11y.

SweetModal

Сладкие, простые и мощные модальные окна с использованием jQuery. Замените alert (), confirm (), prompt () и многие другие плагины стильно и элегантно.

• Михал Бучко
• 10 ноября 2011 г.

Модальный

плагин jQuery для создания модальных окон.

Фокус

Минимальный плагин для всплывающих окон, модальных окон, уведомлений, оверлеев, ящиков и диалоговых окон.

• Веб-гаджеты
• 16 апреля 2017 г.

Модальная коробка

Плагин Modal Box поможет вам создать окно, которое всплывает перед другими элементами на вашей странице. Его можно использовать для рекламы, формы подписки, форм загрузки, форм входа / регистрации или для отображения простого сообщения посетителю.

12 бесплатных модальных оконных библиотек и плагинов для вашего сайта

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

Благодаря быстро развивающимся технологиям JavaScript, которые у нас есть сегодня, а также огромному сообществу разработчиков ПО с открытым исходным кодом, вы можете мгновенно настроить чистые модальные окна.

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

Панель инструментов веб-дизайнера

Неограниченное количество скачиваний: более 1 000 000 веб-шаблонов, тем, плагинов, ресурсов дизайна и многого другого!

1.jQuery Modal

Ищете что-то сверхчистое и простое в использовании? Тогда jQuery Modal должен быть вашим основным ресурсом.

Этот плагин со специальными возможностями работает с сочетаниями клавиш (ESC для закрытия) и даже поддерживает сенсорные действия. Полная библиотека весит около 1 КБ, что очень мало.

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

2. LeanModal

Плагин LeanModal jQuery имеет очень похожий «чистый» дизайн, как и плагин jQuery Modal.

Они оба выглядят одинаково и предлагают схожие возможности. Но LeanModal выделяется тем, что поддерживает обратные вызовы API для пользовательских эффектов анимации и более технического содержания.

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

3. iziModal.js

Если перейти к более сложной стороне модального дизайна, у нас есть iziModal. js.

Это определенно более крупный плагин, и в нем намного больше эстетики.Он поддерживает десятки анимаций с эффектами скольжения, эффектами затухания и даже модальными окнами с вкладками для переключения между формами входа / регистрации.

iziModal — личный фаворит только благодаря чистому дизайну и фантастическим эффектам UI / UX.

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

4. ARIA Modal

Акроним WAI-ARIA W3 длинный и запутанный.На самом деле он просто определяет, как вы должны обрабатывать богатый опыт для более доступной сети.

Очень немногие модальные окна разработаны с учетом доступности. Однако плагин ARIA Modal jQuery — лучшее, что я нашел.

Он получает частые обновления и должен работать на всех устройствах, во всех браузерах, для всех входов (нажмите и коснитесь).

Единственная проблема в том, что плагины, ориентированные на доступность, обычно выглядят немного «некрасивее».

Это будет идеально, если вас больше волнует доступность, а не эстетика.

5. Ремодал

Скрипт Remodal был разработан для скорости. Он работает поверх CSS-анимации и работает с очень маленьким скриптом jQuery.

Однако есть одна небольшая проблема с Remodal: он больше не поддерживается разработчиком.

Вы можете прочитать больше в репозитории GitHub, но этот плагин навсегда останется в версии 1.0, если кто-то не разветвит код. Тем не менее я считаю, что это полезный плагин, который вряд ли представляет угрозу безопасности.

6.FancyBox

Хотя технически это не полный «модальный» скрипт, я действительно хочу включить FancyBox, потому что он имитирует модальное поведение.

Плагин FancyBox работает на jQuery и создает модальную галерею слайд-шоу из списка миниатюр. Он не позволяет создавать модальные окна предупреждений, как обычно, поэтому это не плагин для прямого модального окна.

Однако он будет хорошо сочетаться на странице с другим модальным скриптом, потому что лайтбокс слайд-шоу изображений выглядит как настоящее модальное окно.

7. animatedModal.js

animatedModal.js уникален, потому что он занимает всего экрана , а не только небольшое пространство на странице.

Возможно, это не то, что вы ищете, и это нормально! Мне нравится этот стилизованный модальный экран, потому что у него простой дизайн и огромная библиотека анимационных эффектов (плюс API для их настройки).

Но от масштабного полноэкранного эффекта никуда не деться, так что он будет работать только для разработчиков, которым нравится этот стиль.

8. SimpleModal

С помощью скрипта SimpleModal вы найдете хороший баланс эстетики и удобства использования. Модальные окна кажутся очень естественными, но они не полагаются на сумасшедшую анимацию или длинный JS.

На главной странице вы найдете примеры со всем, от встроенных видео до изображений, настраиваемого контента, модальных окон подтверждения / отмены, полей для входа и многого другого.

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

9.Avgrund Modal

Мне больше всего выделяются сценарии, которые делают что-то другое. Avgrund Modal — один из таких скриптов.

После активации этого модального окна анимация перемещает всю страницу на задний план. Это не то, что работает на каждом веб-сайте. Но это супер уникально и довольно интересно смотреть.

Он работает на jQuery, поддерживает все современные браузеры и предлагает естественные резервные варианты для старых браузеров, начиная с IE6 +.

10. popModal

Один взгляд на страницу popModal, и вы поймете, почему эта вещь так популярна. С помощью popModal вы можете создавать собственные окна, поддерживающие длинную прокрутку текста, кнопки подтверждения / отмены и даже простые уведомления.

Все коды CSS очень легко редактировать, что дает вам полный контроль над дизайном.

Мне не нравится стиль анимации, но он определенно не ужасен. Я просто думаю, что popModal лучше всего работает на сайтах, которые естественно сочетаются с анимацией.

11. SweetAlert2

Вот один из моих самых любимых скриптов оповещений в Интернете: SweetAlert2.

Это обычная библиотека JS с нулевыми зависимостями, и она полностью доступна на основе стандартов WAI-ARIA. Если вы заглянете на главную страницу, вы действительно сможете сравнить традиционное окно предупреждений с модальным окном SweetAlert.

Разница как день и ночь.

12. rmodal.js

Большинство рассмотренных мною библиотек основаны на jQuery.Но есть несколько модальных сценариев, которые вы можете использовать, которые полностью свободны от всех зависимостей (например, SweetAlert2 выше).

rmodal.js предлагает естественный модальный дизайн окна, который подходит для любого сайта. Он не полагается на какие-либо библиотеки JS и довольно мал — всего 1,2 КБ.

Он также может хорошо работать с Bootstrap, если вы думаете об объединении этого с макетом BS3 / BS4.

Но взгляните на пример предварительного просмотра, чтобы увидеть, как rmodal работает в браузере. Это не понравится всем, но это хороший выбор для сценария без зависимостей.

67 Модальные окна CSS

Коллекция модальных окон HTML и CSS . Обновление коллекции за февраль 2019 г. 9 новинок.

1. Начальная загрузка Windows
2. Модальные окна jQuery

Автор

• Нильс Воогт
• 10 января 2021 г.

О коде

Подробности Модальный

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

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

отзывчивый: да

Зависимости: —

Автор

• Игорь Миленкович
• 1 ноября 2020 г.

О коде

Дизайн пользовательского интерфейса всплывающего окна с файлами cookie

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Адаптивный: нет

Зависимости: —

Автор

• Александр Сапальский
• 25 сентября 2020

О коде

CSS Only Modal (ввод: отмечен)

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

отзывчивый: да

Зависимости: —

Автор

• Гомер Гейнс
• 28 августа 2020

О коде

Модальное использование CSS: селектор целей

В этом примере показано, как открыть модальное окно, используя только HTML и CSS.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

отзывчивый: да

Зависимости: —

Автор

• Иван Гроздич
• 10 июля 2020

О коде

Чистый модальный CSS — № 15

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

отзывчивый: да

Зависимости: unicons.css

О коде

Только CSS Модальный

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

отзывчивый: да

Зависимости: font-awesome.css

Автор

• Абубакер Саид
• 26 августа 2019

О коде

CSS Modals v2

io/AbubakerSaeed/details/eYOvKpY»> Вторая версия моего предыдущего пера (CSS Modal).В этом я показал, что есть три разных модальных окна со своими уникальными идентификаторами, и я использую разные ссылки, чтобы открывать и закрывать их.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

отзывчивый: да

Зависимости: —

Автор

• Абубакер Саид
• 24 августа 2019

О коде

CSS Модальный

Модальный CSS (с использованием: target).

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

отзывчивый: да

Зависимости: —

Автор

• Лариса Рабелло
• 22 апреля, 2019

О коде

Модальный режим регистрации

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Адаптивный: нет

Зависимости: bootstrap.css

Автор

• Лассе Диркс
• 26 января 2019

О коде

Всплывающее окно только для CSS

Простое всплывающее окно в HTML и CSS.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

отзывчивый: да

Зависимости: —

Автор

• Микаэль Айналем
• 27 ноября 2018

О коде

Всплывающее окно пользовательского интерфейса материала

Смягчение непросто! Тем не менее, при правильном отступлении от рекомендаций по материальному дизайну вы получите резкую и резкую анимацию.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

отзывчивый: да

Зависимости: —

Автор

• Тимоти Лонг
• 19 декабря 2013 г.

О коде

Модальный

Базовое модальное окно только для CSS.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Адаптивный: нет

Зависимости: font-awesome.css

Автор

• Мерт Цукурен
• 1 октября 2018 г.

Сделано с

• HTML / CSS (SCSS) / JavaScript (Babel)

О коде

Модальный вход

Модальная форма входа в систему в HTML, CSS и JavaScript.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

отзывчивый: да

Зависимости: —

Автор

• Тибо Гойффон
• 1 сентября 2018 г.

О коде

Необычное всплывающее окно

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Адаптивный: нет

Зависимости: —

О коде

Всплывающее окно

Дизайн всплывающих окон на чистом CSS с анимацией.

Автор

• Блейк Боуэн
• 26 февраля 2018

Сделано с

• HTML
• CSS / SCSS
• JavaScript (tweenmax.js)

О коде

Складной модальный

Складывающееся модальное окно с HTML, CSS и JS.

Автор

• Эрдем Услу
• 28 января 2018

О коде

Всплывающее окно CSS

Модальное окно на чистом CSS.

Автор

• Джошуа Уорд
• 9 января 2018

О коде

Super Simple Easy Modal

Super simple easy modal с ES6.

О коде

Всплывающая анимация только CSS

Всплывающая анимация HTML и CSS.

Сделано с

• HTML
• CSS
• JavaScript (jquery.js)

О коде

Оверлейная анимация PopUp

Наложение всплывающих окон с использованием HTML, CSS и JavaScript.

Сделано с

• HTML
• CSS / SCSS
• JavaScript / Babel (popmotion.js)

О коде

Анимировать модальный выход из триггера

Анимация модального окна из триггера с помощью popmotion.js.

О коде

Super Easy Totally Cool Modal

Только CSS super easy полностью классное модальное окно.

О коде

Переместить модальный объект по пути

Перемещение модальных окон по пути с помощью HTML, CSS и JavaScript.

Сделано с

• HTML
• CSS / SCSS
• JavaScript (vue.js)

О коде

Интерфейсный модуль с Vue.js

Переход через встроенные (или что-то еще) экраны в модальном режиме по горизонтали или вертикали.

Демо-изображение: React Modal UI

React Modal UI

Модальный интерфейс с HTML, CSS и React.js.
Сделано Майком
8 февраля 2017 г.

Демонстрационное изображение: элемент диалогового окна HTML5

Элемент диалогового окна HTML5

Возился с диалоговым элементом HTML5.
Сделано Андреасом Виркусом
31 января 2017 г.

Демонстрационное изображение: Фрагмент простого модального окна JS

Фрагмент простого модального окна JS

Простой фрагмент модального окна в HTML, CSS и JavaScript.
Сделано Тобиасом Больоло
5 ноября 2016 г.

Демо-изображение: Модальная кнопка смещения материала

Модальная кнопка смещения материала

Две кнопки с призывом к действию, которые создают контекст для ваших модальных окон в стиле материального дизайна.
Сделано Ettrics
8 октября 2016 г.

Демонстрационное изображение: Адаптивный модальный дизайн

Адаптивный модальный дизайн

Модальные окна, вдохновленные материальным дизайном. Не требуется jQuery. Отзывчивый.
Сделано Ettrics
8 октября 2016 г.

Демо-изображение: Чистый модальный CSS

Чистый модальный CSS

Модальное окно на чистом CSS.
Сделано Дэниелом Гриффитсом
24 августа 2016

Демонстрационное изображение: ModalX Animated Modal

ModalX Animated Modal

Анимированное модальное окно с HTML, CSS и JavaScript.
Сделано Кристофером Бикудо
28 июля 2016 г.

Демонстрационное изображение: Плоское модальное окно

Плоское модальное окно

Плоское модальное окно с HTML, CSS и JavaScript.
Сделано Дронкой Рауль
15 июля 2016 г.

Демонстрационное изображение: Отзывчивый модальный

Адаптивный модальный

Простое адаптивное модальное окно с HTML, CSS и JavaScript.
Сделано Наиноа Шизуру
11 июля 2016 г.

Демонстрационное изображение: упрощенный диалог

Упрощенный диалог

Упрощенный диалог с HTML, CSS и JavaScript.
Сделано Тристаном Уайтом
9 июля 2016 г.

Демо-образ: нет модального всплывающего окна JS

Нет модального всплывающего окна JS

Используя старый ярлык, трюк с флажком для запуска модального окна. Все CSS. JavaScript не требуется.
Сделано Дэвидом Коннером
6 июля 2016 г.

Демо-изображение: Еще одна модальная коробка

Еще одна модальная коробка

Еще одна модальная коробка!
Сделано Valentine
29 июня 2016 г.

Демо-изображение: Только CSS Модальное окно

Только CSS Модальное окно

Задача создать модальное окно подтверждения без использования JavaScript.Возможно, не используется в производстве, но все же работает.
Сделано Кристоффером Остлундом
1 мая 2016 г.

Демонстрационное изображение: Flappy Dialog

Flappy Dialog

Гибкое диалоговое окно HTML, CSS и JavaScript.
Сделано Alex
15 апреля 2016 г.

Демо-изображение: модальное с Clip-Path

Модальное с Clip-Path

Модальное окно с анимацией открывается с анимацией clip-path. Обратите внимание, что clip-path не ускоряется аппаратно и не работает в IE.
Автор: Йонас Сандштедт
14 апреля 2016 г.

Демо-изображение: модальное окно

Модальное окно

Модальное окно с HTML, CSS и JavaScript.
Автор Офелия Фурнье-Лафламм
14 апреля 2016 г.

Демо-изображение: кнопка преобразования в модальное окно

Кнопка преобразования в модальное окно

Кнопка преобразования в модальное окно с помощью React.js
Сделано Кайл Дж. Кресс
23 марта 2016 г.

Демонстрационное изображение: модальное всплывающее окно

Модальное всплывающее окно

Модальное окно HTML, CSS и JavaScript.
Сделала Настасья
23 марта 2016 г.

Демонстрационное изображение: Эффект диалога оригами

Эффект диалога оригами

Идея состоит в том, чтобы поэтапно заменить путь контейнера пуговицы на путь оригами.
Сделано Бхакти Аль Акбаром
4 марта 2016 г.

Автор

• Фабио Оттавиани
• 02.03.2016

Сделано с

• HTML
• CSS / SCSS
• JavaScript (jquery.js)

О коде

Всплывающее окно / оверлей

Всплывающее / оверлейное окно на HTMl, CSS и JS.

Демонстрационное изображение: модальное взаимодействие с Genie Effect

Модальное взаимодействие с Genie Effect

В духе Mac OS X минимизируйте взаимодействие.Создан с использованием плагина SVG и Greensock.
Сделано Бхакти Аль Акбаром
4 марта 2016 г.

Демонстрационное изображение: Простое, гибкое и отзывчивое модальное окно на основе Flexbox

Простое, гибкое и отзывчивое модальное окно на основе Flexbox

Пример модального окна Flexbox. Он адаптивен, легко интегрируется и расширяется и передает атрибуты контента. Искал простой подход, не зависящий от какой-либо библиотеки. Прямой CSS / jQuery.
Сделано Брайаном Чалкером
1 марта 2016 г.

Демонстрационное изображение: Анимированный модальный блок

Анимированный модальный блок

Анимированный модальный блок HTML, CSS и JavaScript.
Сделано lefoy
21 февраля 2016 г.

Демонстрационное изображение: модальное диалоговое окно

Модальное диалоговое окно

Простое модальное окно с плавными переходами CSS3. Обычно используется для просмотра раздражающе важного контента при посещении веб-сайта.
Сделано Дэвидом Фитасом
21 января 2016 г.

Демонстрационное изображение: модальная анимация

Модальная анимация

Модальная анимация с HTML, CSS и JavaScript.
Сделано Giana
16 января 2016 г.

Демонстрационное изображение: 3D Dialog

3D Dialog

3D модальное диалоговое окно в HTML / CSS и JavaScript.
Производитель Гезы Домби
2 декабря 2015 г.

Демонстрационное изображение: Basic CSS Modal

Basic CSS Modal

Базовое модальное окно с HTML и CSS.
Сделано Тимоти Лонг
2 декабря 2015 г.

Демо-изображение: Концепция уничтожения модального окна

Концепция уничтожения модального окна

Модальное окно разрушает концепцию с помощью HTML, CSS и JavaScript.
Сделано в LegoMushroom
24 ноября 2015 г.

Демонстрационное изображение: диалоговое окно запроса с размытием фона

Диалог запроса с размытием фона

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

Демо-изображение: модальное окно

Модальное окно

Модальное окно с HTML, CSS и JavaScript.
Сделано Филиппом Раппольдом
2 августа 2015 г.

Демо-изображение: Чистый модальный CSS

Чистый модальный CSS

Модальное окно HTML и CSS.
Сделано Марком Холмсом
25 июня 2015 г.

Демо-изображение: Чистый модальный CSS + слайдер

Чистый CSS-модальный + слайдер

Отзывчивый модальный диалог, использующий только CSS, включая содержимое скользящей / карусельной внутри модального окна.
Сделано Марвином Орендейном
23 июня 2015 г.

Демо-изображение: модальное окно морфинга

Модальное окно морфинга

Кнопка с призывом к действию, которая анимируется и превращается в полноразмерное модальное окно. Конечный результат обеспечивается комбинацией CSS-переходов и преобразований, jQuery и Velocity.js.
Сделано CodyHouse
12 марта 2015 г.

Демонстрационное изображение: Физика модальной анимации

Физика модальной анимации

Возился с физикой ключевых кадров / переходов для модального окна.В основном сосредоточен на времени между наложением, модальным контейнером и модальным содержимым, чтобы попытаться сделать все событие более органичным. Вы не поверите, но вдохновленные всплывающими меню в Super Mario 3D.
Сделано Tey Tag
18 февраля 2015 г.

Демо-изображение: Swing Out Modal

Swing Out Modal

Забавная маленькая модальная концепция с HTML и CSS.
Сделано Майклом Смитом
17 февраля 2015 г.

Демонстрационное изображение: Модальная идея с принудительной отправкой

Модальная идея с принудительной отправкой

Небольшой аккуратный способ придать вашей странице некоторую глубину.
Сделано в Short
4 февраля 2015 г.

Демонстрационное изображение: всплывающее окно с анимацией размытого фона

Всплывающее окно с анимацией размытого фона

Вот всплывающее окно, которое появляется при размытии тела под ним. щелкните значок «X» во всплывающем окне и возвратитесь к размытию, когда всплывающее окно исчезнет. Подходит для сайтов, которым может потребоваться ворчание (например, для пожертвований или услуг по подписке) или которые могут быть повторно использованы в качестве общего модального окна или лайтбокса. Использует фильтр CSS3 (для размытия) и анимацию CSS3 для размытия переходов.В этой итерации jQuery минимален, он просто используется для исчезновения всплывающих окон и добавления и удаления классов CSS3 для размытия.
Сделано Бенджамином Далтоном
31 декабря 2014 г.

Демонстрационное изображение: простые эффекты диалога

Простые эффекты диалога

Простые эффекты диалогов в HTML, CSS и JavaScript.
Сделано dodozhang21
29 декабря 2014 г.

Демонстрационное изображение: Модальное окно с линейной анимацией только для CSS

Модальное окно с линейной анимацией только для CSS

Модальное рисование затем исчезает с использованием анимации SVG и CSS.
Сделано Томом
22 декабря 2014 г.

Демонстрационное изображение: Анимированные модальные окна на чистом CSS

Анимированные модальные на чистом CSS

Анимированный модальный слайд с поддержкой обратной стороны браузера. Нет JS-анимированного слайд-шоу с вкладками. Нет JS.
Сделано Томом
8 декабря 2014 г.

Демо-изображение: Техника лайтбокса на чистом CSS

Техника лайтбокса на чистом CSS

Lightbox без использования JavaScript.
Изготовлено Ахбаром
1 октября 2014 г.

Демонстрационное изображение: перетаскиваемое полупрозрачное модальное окно

Перетаскиваемое полупрозрачное модальное изображение

Перетаскиваемое полупрозрачное модальное окно с HTML, CSS и JavaScript.
Сделано Джесси Коуч
24 сентября 2014 г.

Демонстрационное изображение: всплывающее окно с простым подтверждением

Всплывающее окно с простым подтверждением

Простое отзывчивое диалоговое окно подтверждения с тонкой анимацией ввода CSS3.
Сделано Приключениями в Миссиях
2 июля 2014 г.

.