Модальное окно с помощью 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;
}

#mask {
  position:absolute;
  left:0;
  top:0;
  z-index:9000;
  background-color: #8a8a8a;
  display:none;
}
html код :



<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

 






Комментарии (5)

21 марта, 2011  Автор: Mr. Black
2 Василий Используйте хад для Оперы + margin-left: 400px; или left: 400px;
16 января, 2011  Автор: Василий
У меня точно с такого же кода всплывает окно авторизации, и оно в 11 опере прижато к левой стороне и всплывает не на весь экран. Как это исправить? помогите люди добрые.
17 мая, 2010  Автор: Антон
А можно пример как разместить несколько модальных окон на одной страничке? т.е. из базы генерируется список документов и для каждого дока нужно своё модал.окно...
31 марта, 2010  Автор: Пётр
добавил простой пример
4 марта, 2010  Автор: true_goth
где пример?