Авторизация



Напомнить пароль
Регистрация


РазработкаВсплывающие модальные и диалоговые окна с использованием jQuery и Mootools

Mootools плагин модальных окон Facebook

В заметке собрано 17 решений для реализации всплывающих модальных и диалоговых окон с помощью jQuery Mootools и CSS.

1. Модальное окно на jQuery «Simple Modal Box»

Simple Modal Box With JQuery

2. jQuery плагин «LeanModal»

Отображение контента в модальных окнах

Отображение контента в модальных окнах. Для просмотра плагина в действии на демонстрационной странице нажмите на ссылку: Sign Up Form или Basic Content.

3. jQuery плагин «ToastMessage»

Всплывающие сообщения

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

4. Содержимое, всплывающее в модальном окне

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

Плагин «Reveal». Для просмотра плагина в действии нажмите на кнопку «Fire A Reveal Modal» на демонстрационной странице.

5. Симпатичные диалоговые окна

Диалоговое окно

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

6. Mootools модальное окно, плагин «MooDialog»

Mootools модальное окно

7. jQuery всплывающая панель сверху экрана

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

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

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

9. Форма обратной связи в модальном окне

Форма обратной связи в модальном окне

jQuery плагин для отображения формы обратной связи во всплывающем окне.

10. MooTools плагин «LightFace» для реализации диалоговых окон Facebook

Mootools плагин модальных окон Facebook

Диалоговые окна в стиле Facebook. Помимо статической информации в окна можно поместить изображения, фреймы, Ajax запросы. Много настроек работы плагина, очень мощный инструмент. Выглядит очень стильно и функционально. Пройдите по ссылкам на демонстрационной странице чтобы посмотреть примеры с различным содержимым.

11. jQuery модальное окно

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

Аккуратное всплывающее диалоговое окно на jQuery.

12. Модальные окна jQuery

jQuery модальные окна

Симпатичные всплывающие модальные окна. Три стилевых оформления. На демонстрационной странице представлено 3 ссылки для вызова окон.

13. Модальные окна jQuery

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

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

14. Диалоговые окна с помощью jQuery и CSS3

Диалоговые окна с помощью jQuery и CSS3

15. Всплывающее поверх страницы сообщение

Всплывающее jQuery сообщение

Сообщение отображается поверх страницы, которая, в свою очередь, затемняется. Нажмите на надпись «Click me» на демонстрационной странице, чтобы увидеть всплывающее сообщение. Нажатие на крестик его закроет. Реализовано с помощью jQuery.

16. Модальное окно «ModalBox» на JavaScript

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

Реализация современных модальных диалоговых окон без использования всплывающих окон и перезагрузок страницы. На демонстрационной странице нажмите на кнопку «Start Demo» чтобы посмотреть на работу скрипта.

17. «Leightbox» плагин с использованием библиотеки Prototype 

Leightbox

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

Подготовлено по материалам: efimov.ws

  • 0
  • Автор: efimov
  • Дата: 24 ноября 2011, 16:36
  • В избранное:


Комментарии (2)

rss свернуть / развернуть
  • avatar
  • regau
  • 06 февраля 2012, 13:30
  • #
  • 0
Огромное спасибо за статью! Все способы в одном месте
свернуть ветку
А как можно передать данные на это окно?
У меня есть таблица которая вычитывается с базы, надобно при клике на строку открывать всплывающее окно с детальной информацией о этой строке.
свернуть ветку
Только зарегистрированные и авторизованные пользователи могут оставлять комментарии.