SIMPLEMODAL - маленький плагин для создания модальных окон. Его можно использовать для вывода сообщений или диалоговых окон, написав неколько строчек кода. Конфигурация подтверждения включает возвратные функции, в которых можно создавать нужный функционал. Плагин может работать в асинхронном режиме и получать содержание окон с других страниц.


Примеры


Как использовать

SIMPLEMODAL очень прост в исопльзовании. Есть 4 способа для создания модального окна: простое сообщение, модальное окно, модальное окно с AJAX запросом, и лайтбокс.

Простое сообщение

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

Модальное окно

1
2
3
4
5
6
7
8
9
10
11
12
13
$("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 запросом

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("Текст кнопки", "btn primary", function(){
          this.hide();
      });
      SM.addButton("Отказаться", "btn");
      SM.show({
        "model":"modal-ajax",
        "title":"Заголовок окна",
        "param":{
          "url":"ajax-content.php",
          "onRequestComplete": function(){ /* Действия после завершения запроса */ }
        }
      });
});

Лайтбокс

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(){ }
        }
      });
});