Разработка express-приложения - Модальное окно на Ajax

Для создания модального окна на ajax воспользуемся библиотекой jQuery.

Создадим функцию манипулирования модальным окном. Функция будет возвращать модальное окно, если оно существует либо создавать новое.

var fx = {
 “initModal” : function(){
 if($(“.modal-window”).length == 0) {
   return $(“<div>”)
            .addClass(“modal-window”)
            .appendTo(“body”);
  }
 else {
   return $(“.modal-window”);
  }
 }
}

Далее модифицируем обработчик события click.

jQuery(function($) {

var fx = {
 “initModal” : function(){
 if($(“.modal-window”).length == 0) {
   return $(“<div>”)
            .addClass(“modal-window”)
            .appendTo(“body”);
  }
 else {
   return $(“.modal-window”);
  }
 }
} 

$(“li>a”).bind(‘click’, function(event){
   event.preventDefault();
// Проверим, что сработал обработчик события и выведем текст ссылки в консоль firebug
var data = $(this).attr(‘href’);
  modal = fx.initModal();
});
})

Теперь по событию click будет появляться модальное окно. Но мы его не заметим до тех пор, пока не пропишем css-стили для класса .modal-window

.modal-window {
 position:absolute;
 top:150px;
 left:50%;
 width:400px;
 margin-left:200px;
 padding:10px;
 border:solid 1px #ccc;
 background-color:#fff;
 z-index:99;
 border-radius: 5px;
}

Основная функция для работы с AJAX-запросами – это функция ajax().

Рассмотрим основные опции функции ajax.

• url – файл, к которому будет отправлен запрос.

• type – способ передачи данных: $_POST либо $_GET

• timeout – время выполнения запроса, число в милисекундах. Работа ajax останавливается, если за данное время запрос не успел обработаться. Параметр необязательный.

• beforeSend – функция срабатывающая, во время выполнения запроса. Т.к. по умолчанию, ajax-запросы передаются в асинхронном режиме, то в процессе выполнения запроса, мы можем выполнять любые другие функции.

• success - функция срабатывающая после успешного выполнения запроса.

• error – функция, выводящая ошибки запроса, если таковые имеются.

• data – строка с передаваемыми данными. Объект должен представлять собой пары ключ/значение.

$(“li>a”).live(‘click’, function(event){
   event.preventDefault();
// Проверим, что сработал обработчик события и выведем текст ссылки в консоль firebug
   var data = $(this).text();
   modal = fx.initModal();
   $.ajax({
     type: “Post”,
     url: “ajaxfile.php”,
     data: “url=” +data,
     success: function(data) {
       modal.append(data); 
     },
     error: function(msg) {
       modal.append(msg);
     }
   });
});

Теперь по событию клик будет создаваться модальное окно и в это окно будет помещаться всё текстовое содержимое файла ajaxfile.php (всё, что выводится на экран в данном файле).

$(“<a>”).attr(“href”, “#”)
        .addClass(“modal-close-btn”)
        .html(“×”)
        .click(function(event){
           event.preventDefault();
           $(“.modal-window”).remove();
   }).appendTo(modal);

Добавим стили дня кнопки закрытия

.modal-close-btn{
position:absolute;
top:1px;
right:1px;
margin:0;
padding:0;
text-decoration:none;
color:red;
font-size:18px;
}
.modal-close-btn:before{
position:relative;
top:-1px;
content: “Закрыть”;
font-size:12px;
}