332 Simple Modal — небольшой плагин для создания модальных окон. Он может использоваться для вывода окон предупреждения или сообщений, требующих подтверждения от пользователя. Плагин поддерживает обратные вызовы, может работать в асинхронном режиме и принимать контент с внешних страниц.
Simple Modal не является lightbox-окном, хотя, если скрыть некоторые его части, то сходство есть.
Скачать
Использование
Как подключать плагин к странице, вы найдете в исходниках, а пока рассмотрим его применение.
Simple Modal очень прост в использовании. Существует 4 типа окна: простое предупреждающее сообщение, модальное окно, модальное окно с асинхронным вызовом и лайтбоксом.
Интеграция предупреждающего сообщения
|
1 2 3 4 5 6 7 |
$("myElement").addEvent("click", function(){ var SM = new SimpleModal({"btn_ok":"Alert button"}); SM.show({ "title":"Title", "contents":"Your message..." }); }); |
Интеграция модального окна
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
$("myElement").addEvent("click", function(){ var SM = new SimpleModal({"btn_ok":"Confirm button"}); SM.addButton("Action button", "btn primary", function(){ alert("Add your code"); this.hide(); }); SM.addButton("Cancel", "btn"); SM.show({ "model":"modal", "title":"Title", "contents":"Your message..." }); }); |
Модальная AJAX интеграция
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
$("myElement").addEvent("click", function(){ var SM = new SimpleModal({"width":600}); SM.addButton("Action button", "btn primary", function(){ this.hide(); }); SM.addButton("Cancel", "btn"); SM.show({ "model":"modal-ajax", "title":"Title", "param":{ "url":"ajax-content.php", "onRequestComplete": function(){ /* Action on request complete */ } } }); }); |
Модальное изображение
|
1 2 3 4 5 6 7 8 9 10 11 |
$("myElement").addEvent("click", function(){ var SM = new SimpleModal(); SM.show({ "model":"modal-ajax", "title":"Image title", "param":{ "url":"http://url-file.jpg", "onRequestComplete": function(){ } } }); }); |
Вот и все.
