Автор

27 04.2013
Модальные окна с помощью плагина Mootools

Модальные окна с помощью плагина Mootools


 

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

 

ДЕМО
ИСХОДНИКИ

 

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

 

<div class="window"></div>
 <div class="simple-modal-title"></div>
 </div>
 <div class="wrapper">
 <ul>
 <li class="example-item" id="alert">
 <img src="assets/images/example-1.jpg" width="196" height="147" alt="Пример 1">
 <a href="#">Предупреждение</a>
 </li>
 <li class="example-item" id="confirm">
 <img src="assets/images/example-2.jpg" width="196" height="147" alt="Пример 2">
 <a href="#">Подтверждение</a>
 </li>
 <li class="example-item" id="modal">
 <img src="assets/images/example-3.jpg" width="196" height="147" alt="Пример 3">
 <a href="#">Модальное окно</a>
 </li>
 <li class="example-item" id="modal-ajax">
 <img src="assets/images/example-4.jpg" width="196" height="147" alt="Пример 4">
 <a href="#">AJAX запрос </a>
 </li>
 <li class="example-item" id="modal-image">
 <img src="assets/images/example-5.jpg" width="196" height="147" alt="Пример 5">
 <a href="#">Изображение</a>
 </li>
 <li class="example-item" id="alert-noheader">
 <img src="assets/images/example-6.jpg" width="196" height="147" alt="Пример 6">
 <a href="#">Без заголовка</a>
 </li>
 <li class="example-item" id="modal-nofooter">
 <img src="assets/images/example-7.jpg" width="196" height="147" alt="Пример 7">
 <a href="#">Встроенное видео</a>
 </li>
 <li class="example-item" id="example-eheh">
 <img src="assets/images/example-8.jpg" width="196" height="147" alt="?">
 <a href="#">?</a>
 </li>

 </ul>

 

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

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

 

 

$("myElement").addEvent("click", function(){
  var SM = new SimpleModal({"btn_ok":"Текст кнопки"});
      SM.show({
        "title":"Заголовок окна",
        "contents":"Текст сообщения..."
      });
});

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

 

$("myElement").addEvent("click", function(){
  var SM = new SimpleModal({"btn_ok":"Текст кнопки"});
      SM.addButton("Текст кнопки", "btn primary", function(){
        alert("Добавьте ваш код");
        this.hide();
      });
      SM.addButton("Cancel", "btn");
      SM.show({
        "model":"modal",
        "title":"Заголовок окна",
        "contents":"Текст сообщения..."
      });
});

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

 

$("myElement").addEvent("click", function(){
  var SM = new SimpleModal({"width":600});
      SM.addButton("Текст кнопки", "btn primary", function(){
          this.hide();
      });
      SM.addButton("Отказаться", "btn");
      SM.show({
        "model":"modal-ajax",
        "title":"Заголовок окна",
        "param":{
          "url":"ajax-content.php",
          "onRequestComplete": function(){ /* Действия после завершения запроса */ }
        }
      });
});

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

 

$("modal-image").addEvent("click", function(e){
e.stop();
var SM = new SimpleModal();
SM.show({
"model":"modal-ajax",
"title":"Модальный лайтбокс",
"param":{
 "url":"assets/images/lightbox.jpg",
 "onRequestComplete": function(){ }
}
});
 })

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


vk.com/club.ssdru

Подписывайтесь на нашу группу в контакте vk.com/club.ssdru


Статьи по темеJS

27 04.2013
Модальные окна с помощью плагина Mootools

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


12 05.2017
Модальные окна с помощью плагина Mootools

Хорошо спроектированный фильтр - это мощный инструмент, которым могут воспользоваться пользователи. На самом деле это важная функция, если на вашем сайте (интернет-магазине) есть много товара, распределенного по разным категориям.


02 05.2013
Модальные окна с помощью плагина Mootools

Во время просмотра web - я заметил новые интересные библиотека - TN3. Это jQuery коллекции изображений в слайд-шоу, c эффектами перехода, несколько альбомов опций и т.д. Кроме того, вы сможете настроить его (через CSS). Сегодня я покажу вам, как можно реализовать эту галерею, чтобы создать собственный фотоальбом.


20 03.2013
Модальные окна с помощью плагина Mootools

Здравствуйте, уважаемые читатели! Есть много способов, показать информацию о продукте. В этом уроке я собираюсь рассказать Вам, как можно сделать куб с информацией на гранях. Будет применен эффект, который основан на CSS3 Transform 3D. Эффект корректно работает в FF, Chrome и Safari, Opera и IE пока не поддерживают CSS Transform 3D.


105 Публикаций

Раскрутка в соцсетях

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


Перейти в Блог

О КОМПАНИИ

Studio Design существует с 2001 года. Основной нашей деятельностью до 2007 года было видеопроизводство ( видеореклама и документальные фильмы, о чем подробно описано в нашем блоге ). С 2007 года, вот уже как лет, наша основная специфика - это создание сайтов для бизнеса или частной деятельности, веб дизайн, а также поддержка и администрирование готовых проектов. Каждая выполненная нами работа - это уникальный, а самое главное, адаптивный под все современные мобильные устройства дизайн сайта. Мы готовы создать сайт с нуля для каждого клиента с любого уголка России! Мы поможем Вам в создании, как одностраничных сайтов – визиток, так и крупных интернет магазинов или корпоративных сайтов. А все наши работы, большинство из которых действуют и по сей день!

Close

Целовальников Сергей


Веб-дизайн, HTML5, CSS3, jQuery, JavaScript, Верстка.

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

Close