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

 ..HTML текст, изображение, видео, и так далее. Как уже упоминалось, плагин мало весит и весьма прост в редактировании, для начала мы рассмотрим структуру HTML, и как выводиться каждое модальное окно:

Как вы заметили ничего сложного нет, таким образом мы вывели 8 примеров различным модальных окон. Далее мы рассмотрим основные модальные окна и процесс их создания.

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

Вторым будет полноценное модальное окно, следует заметить, что все окна обладают технологией drag-and-drop, это значит, что модальные окна можно перетаскивать по экрану:

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

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

Материал взят из зарубежного источника. И представлен исключительно в ознакомительных целях.

Читайте также: