Если перед вами стоит задача прицепить модальное окно на страничку, то в этом нет ничего сложного, особенно если сделать все самим без плагинов. Единственное что от нас понадобится – чтобы было подключение к библиотеке jquery, которая последнее время как правило всегда подключена. Приступим.

Сначала прописываем ссылки для окон:

<h1>Страничка с модальными окнами</h1>
<p><a href="#modal1" class="open_modal">Ссылка с окном 1</a></p>
<p><a href="#modal2" class="open_modal">Ссылка с окном 2</a></p>
<p><a href=".modal_class" class="open_modal">Ссылка с окном 3 (через класс)</a></p>

Теперь создадим наши простейшие модальные окна. В примере совсем все просто, если вам понадобится то вы сможете оформить их как вам надо будет.  По умолчанию в стилях отключаем их отображение.

<!-- Сами модальные окна -->
<div id="modal1" class="modal_div">
        <span class="modal_close">X</span>
	<h3>Пример модального окна 1</h3>
	<p>Тут может быть что угодно</p>
</div>

<div id="modal2" class="modal_div">
	<span class="modal_close">X</span>
        <h3>Пример модального окна 2</h3>
	<p>Тут какой то пример 2.</p>
</div>

<div class="modal_div modal_class">
	<span class="modal_close">X</span>
	<h3>Пример модального окна 3</h3>
	<p>Еще какое то окно с инфой</p>
</div>
<!-- Сами модальные окна -->

Подложку можно засунуть повыше, чтобы не потерялась внутри какого-нибудь вложенного div-а. Этот div также полезен чтобы при клике на нем модальное окно закрывалось.

<!-- Подложка одна для всех -->&nbsp;
<div id="overlay"></div>
&nbsp;
<!-- Подложка одна для всех -->&nbsp;

Наши стили:

.modal_div {
	width: 300px;
	height: 200px; /* Размеры должны быть фиксированы */
	border-radius: 5px;
	border: 3px #000 solid;
	background: #fff;
	position: fixed; /* чтобы окно было в видимой зоне в любом месте */
	top: 45%; /* отступаем сверху 45%, остальные 5% подвинет скрипт */
	left: 50%; /* половина экрана слева */
	margin-top: -150px;
	margin-left: -150px; /* тут вся магия центровки css, отступаем влево и вверх минус половину ширины и высоты соответственно  */
	display: none; /* в обычном состоянии окна не должно быть */
	opacity: 0; /* полностью прозрачно для анимирования */
	z-index: 5; /* окно должно быть наиболее большем слое */
	padding: 20px 10px;
}
/* Кнопка закрыть для тех кто в танке) */
.modal_close {
	width: 21px;
	height: 21px;
	position: absolute;
	top: 10px;
	right: 10px;
	cursor: pointer;
	display: block;
}
/* Подложка */
#overlay {
	z-index: 3; /* подложка должна быть выше слоев элементов сайта, но ниже слоя модального окна */
	position: fixed; /* всегда перекрывает весь сайт */
	background-color: #000; /* черная */
	opacity: 0.9; /* но немного прозрачна */
	width: 100%;
	height: 100%; /* размером во весь экран */
	top: 0;
	left: 0; /* сверху и слева 0, обязательные свойства! */
	cursor: pointer;
	display: none; /* в обычном состоянии скрыта */
}

Ну и наш скрипт. Класс open_modal у ссылок нам нужен чтобы через него открывать модальные окна.

<script type="text/javascript">
$(document).ready(function() { // запускаем скрипт после загрузки всех элементов
    /* засунем сразу все элементы в переменные, чтобы скрипту не приходилось их каждый раз искать при кликах */
    var overlay = $('#overlay'); // подложка, должна быть одна на странице
    var open_modal = $('.open_modal'); // все ссылки, которые будут открывать окна
    var close = $('.modal_close, #overlay'); // все, что закрывает модальное окно, т.е. крестик и оверлэй-подложка
    var modal = $('.modal_div'); // все скрытые модальные окна

     open_modal.click( function(event){ // ловим клик по ссылке с классом open_modal
         event.preventDefault(); // вырубаем стандартное поведение
         var div = $(this).attr('href'); // возьмем строку с селектором у кликнутой ссылки
         overlay.fadeIn(400, //показываем оверлэй
             function(){ // после окончания показывания оверлэя
                 $(div) // берем строку с селектором и делаем из нее jquery объект
                     .css('display', 'block')
                     .animate({opacity: 1, top: '50%'}, 200); // плавно показываем
         });
     });

     close.click( function(){ // ловим клик по крестику или оверлэю
            modal // все модальные окна
             .animate({opacity: 0, top: '45%'}, 200, // плавно прячем
                 function(){ // после этого
                     $(this).css('display', 'none');
                     overlay.fadeOut(400); // прячем подложку
                 }
             );
     });
});
</script>