// GrayBox v1.2 [21.05.2015] // Custom, simple modal window plugin // Author: Vitali Raikov (October 8, 2013) // Jquery функция для центровки divа jQuery.fn.center = function () { this.css("top", Math.max(0, (($(window).innerHeight() - this.height()) / 2) + $(window).scrollTop()) + "px"); if (this.css('width') >= $(window).innerWidth()) { $('#graybox').css('left','0px'); } else { this.css("margin-left", '-'+this.width() / 2 + "px"); } return this; }; /* Функция для закрытия модального окна, в качестве аргументов принимает скорость закрытия окна в миллисекундах */ function close_modal(speed){ // Если скорость не задана, по умолчанию используем 500 if (speed === undefined) speed = 100; // Скрываем элемент с заданной скоростью а после, удаляем $('#graybox').fadeOut(speed,function(){ $('#graybox').remove(); // Скрываем фон с заданной скоростью а после, удаляем $('#graybox_overlay').fadeOut(speed,function(){ $('#graybox_overlay').remove(); }); }); } /* Функция для открытия модального окна, в качестве аргументов принимает ID или класс содержимого модального окна в формате '#krolik2' и не обязательно, скорость открытия окна в миллисекундах */ function open_modal(modal, speed){ var modalInFunction = $(modal); if (modalInFunction.length === 0) return; // Предотвращаем открытие второго модального окна if ($('#graybox').length) { $('#graybox_overlay').remove(); $('#graybox').remove(); } // Если скорость не задана, по умолчанию используем 500 if (speed === undefined) speed = 100; // Клонируем div с текстом var old_modal = modalInFunction.clone(); // Шаблон модального окна var new_modal = $($.parseHTML('
')); // В шаблон модального окна, вставляем ранее клонированный div new_modal.find('#graybox-p').append(old_modal); // Вставляем готовое модальное окно, перед body (Невидимые по умолчанию) $('body').prepend(new_modal); // Центруем модальное окно $('#graybox').center(); // Показываем оба divа с заданной скоростью. $('#graybox_overlay').fadeIn(speed, function(){ $('#graybox').fadeIn(speed, function(){ }); }); // Инициализируем закрытие по фону и закрытие по кнопку $('#graybox-close, #graybox_overlay').on('click', function(){ close_modal(); }); // Инициализируем закрытие по клавише Escape $(document).keyup(function(e) { if (e.keyCode == 27) { close_modal(); } }); $('.graybox').on('click', function(e) { e.preventDefault(); open_modal($(this).attr('href')); }); } function initGraybox() { // По нажатию на ссылку с классом gb, открываем модальное окно $('.graybox').on('click', function(e) { e.preventDefault(); open_modal($(this).attr('href')); }); // Если есть hash var hash = window.location.hash; if (hash) { // И div с такой id существует if ($(window.location.hash).length) { // показываем модальное окно open_modal(window.location.hash); } } } $( document ).ready(function() { initGraybox(); });