Автор

Модальные окна с помощью плагина 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(){ }
}
});
 })

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

Многие материалы на сайте взяты из блогов: "Все для веб-дизайнера Rudebox", "A free library of HTML, CSS, JS nuggets Codyhouse" - полностью переведен и представлен в ознакомительных целях!

vk.com/club.ssdru

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



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

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

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

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


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

Я уже публиковал урок «Нестандартные Checkbox (RadioButton) без использования JavaScript». Прекрасные кнопочки, но там используются картинки!!! В данном примере используется только CSS. Всё очень просто вы вставляете код в свой стиль и получаете стильные, а именно на мой взгляд, в современном стиле кнопки.


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

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


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

Здравствуйте, уважаемые читатели моего блога! А Вы пользуетесь генераторами CSS3 или HTML5? Если нет, то может стоит попробовать. Просто представьте, можно отказаться от ручного описания стилей для кнопок, углов в блоках, теней, градиентов если кто использует и так далее, так же HTML5. Зачем писать один и тот же код каждый раз при создании нового проекта, когда можно «забить» параметры в окошечки нажать кнопочку и получить готовый исходный код, а если надо то и пофиксить его!
В этой статье покажу Вам подборку из таких генераторов. Преимущественно это будут генераторы CSS3 и парочка для HTML5.


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

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


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

Надёжный хостинг

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

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


Перейти на хостинг

О КОМПАНИИ

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

Close

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


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

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

Close