Простое модальное окно с легким кодом и минимум javascript. Работает во всех современных браузерах. Принцип работы классический: нажимаем на кнопку — экран затемняется и появляется строго по центру модальное окно, куда вы можете вставить какую либо информацию или форму заявки на обратный звонок.
Инструкция по установке на сайт:
1. Скачиваем архив
2. Заливаем файл modal.css и изображение close.png в корень сайта
3. В head вставляем вот этот код:
$(document).ready(function() { $('a[name=modal]').click(function(e) { e.preventDefault(); var id = $(this).attr('href'); var maskHeight = $(document).height(); var maskWidth = $(window).width(); $('#mask').css({'width':maskWidth,'height':maskHeight}); $('#mask').fadeIn(1000); $('#mask').fadeTo("slow",0.8); var winH = $(window).height(); var winW = $(window).width(); $(id).css('top', winH/2-$(id).height()/2); $(id).css('left', winW/2-$(id).width()/2); $(id).fadeIn(2000); }); $('.window .close').click(function (e) { e.preventDefault(); $('#mask, .window').hide(); }); $('#mask').click(function () { $(this).hide(); $('.window').hide(); });});4. Там, где мы хотим видеть кнопку на вывод модального окна, вставляем следующий код:
Открыть модальное окно
Содержимое модального окна
Модальное окно готово!