Начинаем использовать
Данные плагина:
- название: 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.modalCloseimage {
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>
<script type="text/javascript">
$(document).ready( function() {
$(`#messageText`).html(`Это наше окошко!`);
$(`#message`).modal();
});
</script>И при загрузке страницы увидим
Ура, у нас все получилось.
Демо: посмотреть
_________
Текст подготовлен в ХабраРедакторе
Source code was highlighted with Source Code Highlighter.
Распечатать статью
