плагин Mootools позволит вам организовать модальные окна

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

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

Рассмотрим 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(){ }
	}
	});
		})
	 
 

Вот и все, мы с вами рассмотрели интересный плагин для создания модальных окон Moontools, Посмотреть демо