Обзор плагина SimpleModal, его глюков, избавление от глючности, позиционирование по центру экрана и прочие удобства. Вообще я публиковал статью в своем блоге:«SimpleModal — простые модальные окна», но подумал что и хабраюзерам может быть интересно про это узнать. А так же советую взглянуть на более новую статью «Модальные окна на jQuery blockUI». Не все же с лайтбоксами играться.

Начинаем использовать

Данные плагина:

• название: simplemodal
• размер: 10кб без сжатия
• автор: Eric Martin
• сайт: http://www.ericmmartin.com/projects/simplemodal/
• скачать: http://simplemodal.googlecode.com/files/jquery.simplemodal-1.1.1.js
• демо: http://www.ericmmartin.com/simplemodal-test/

Выглядит это дело вот так:



Для того чтобы плагин заработал его надо подключить:
<script src=«jquery.simplemodal.js» type=«text/javascript»></script>

А так же указать стили для овереля (серой области), контейнера (собственно окно) и кнопки закрыть.

#modalOverlay {
background-color:#000; /* Тут выбираем цвет затемнения */
cursor:wait; /* Курсор при наведении на затемненную область */
filter: alpha(opacity=80); /* Интенсивность затемнения */
height: 100%;
}

#modalContainer {
height:auto;  /* Для растягивания по высоте */
width:300px;
left:50%; /*в купе с margin-left, которая равна минус половине ширины центруют по горизонтали*/
top:50%;  /*центрует по вертикали, вместе с margin-top, если задать высоту*/
margin-left:-150px;
/* margin-top: -70px; */
background-color:#fff;
border:3px solid #ccc;
padding: 10px;
} 
a.modalCloseImg {
background:url(x.png) no-repeat;
width:25px; /* Положение отличается от тех, что в примере. Мне кажется так удобнее */
height:29px;
display:inline;
z-index:3200;
position:absolute;
top:0px;
right:0px;
cursor:pointer;
}

К сожалению в плагине таятся некоторые глюки. Так например в опере, если контент страницы короче чем сама страница, то при закрытии окна внизу остается серая область. А в IE она иногда и вовсе не закрашивается.



Однако это решается довольно просто. На страницу необходимо добавить стиль

#helper {
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
z-index: -10;
}


И в любом месте страницы вставляем:

<div id="helper"></div>

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

Делаем удобное оповещение

Сначала добьемся, чтобы окно было посередине страницы. В своем примере я ограничил ширину 300px, а вот высота может меняться. CSS свойство top:50% действительно опускает окно до середины страницы, однако само модальное окно идет как раз ниже середины. Если бы мы указали высоту в пикселях, например 150px, то могли бы поднять окно над центром с помощью margin-top: -75px. Но окно будет резиновым, а мы для этого воспользуемся еще одним плагином: Dimensions. Данные плагина:

• название: Dimensions
• размер: 3кб без сжатия
• сайт: http://docs.jquery.com/Plugins/dimensions
• скачать: http://plugins.jquery.com/files/dimensions_1.2.zip
• демо: http://brandonaaron.net/docs/dimensions/#code-samples

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

<script type="text/javascript" src="jquery.dimensions.js"></script>

Подключили. Теперь открываем редактором файл плагина Simplemodal (jquery.simplemodal.js), да-да, будем исправлять плагин. Если наши версии совпадают, то на строке 294 будет функция open. Идем в самый ее конец, сразу после this.bindEvents(); и до закрывающей фигурной скобки ставим

<pre name="code" class="js">
$('#modalContainer').css('margin-top',-$('#modalContainer').outerHeight()/2-50);
</pre>

Я специально отнял от высоты еще 50 пикселей, мне кажется это добавляет удобства. Но вы можете поэкспериментировать. Осталось совсем немного. Добавляем где-нибудь в конце страницы

<div id="message" style="display: none; text-align: center;">
<div id="messageText">текст модального окна</div><br /><br />
<input type='button' value='Ok' class='modalClose' style='height: 30px; width: 60px;'/>
</div>


Заметьте, кнопка имеет class='modalClose'. Вы можете создать в диве любой другой объект с этим классом — клик по нему будет закрывать окно. Все, приготовления закончены. Осталось его только использовать. Например так:

<script type="text/javascript">
$(document).ready( function() {
$('#messageText').html('Это наше окошко!');
$('#message').modal();
});
</script>

И при загрузке страницы увидим



Ура, у нас все получилось.

Демо: посмотреть
_________
Текст подготовлен в ХабраРедакторе
Source code was highlighted with Source Code Highlighter.