Модальное окно с помощью JQUERY
Как видно из примера создать модальное окно на JQUERY не составляет никаких проблем... :)
$(document).ready(function() {
//выбираем все тэги a с именем modal
$('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').hide();
$('.window').hide();
});
//если кликнули по маске
$('#mask').click(function () {
$(this).hide();
$('.window').hide();
});
});
Собственно наглядный пример использования данного кода :
стиль css :
.window { position:absolute; left:0; top:0; width:440px; height:200px; display:none; z-index:9999; padding:20px; }
html код :#mask { position:absolute; left:0; top:0; z-index:9000; background-color: #8a8a8a; display:none; }
<html> <link href="/css/style.css" type=text/css rel=stylesheet > <script src="/script/файл с нашим кодом.js" language="javascript"></script> <script src="/script/jquery.js" language="javascript"></script> <body> <div id="mask"></div> <a href="#" name="modal">открыть окно</a>
<div class="window"> Заголовок окна<br><br> Текст<br><br> <a href="#" class="close">Закрыть</a> </div> </body> </html>
P.S.
Есть хорошие готовые решения для модальных окон, например jquery плагин fancybox