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

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


Top

🔖 Выбор по тегам ×

💌 Написать сообщение ×

Все поля обязательны для заполнения!