войти зарегистрироваться

jQuery whois

индекс
190,00

SimpleModal — простые модальные окна

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

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


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

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



Для того чтобы плагин заработал его надо подключить:
<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. Данные плагина:

Этот плагин дает нам возможность измерить высоту окна, соответственно и вычислить половину высоты и поднять на это количество пикселей окно над центром веб-страницы.
<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.
+35
30 ноября 2008, 15:12
CharnaD

комментарии (21)

  • У Вас тут опечаточка небольшая вкралась (наверно):

    >> И в любом месте страницы вставляем:
    >> </div id=«helper»>

    И насчет dimensions: мне как-то для оповещений больше по душе пришелся jgrowl
    • спасибо, это и правда опечатка. я просто нечаянно подсветил код с blockquote><code, и потом их вручную доставал оттуда. а про тот слеш забыл)

      jgrowl тоже неплох, но мне кажется они все равно оповещаю чуть-чуть по-разному
    • Спасибо за наводку по jgrowl! То что я искал. Только, мне кажется, у него минус есть: его не очень-то и заметно. Это субъективно.
      • Насколько помню, он неплохо кастомизируется css'ом))
  • мне больше в свое время понравилась эта библиотека dev.iceburg.net/jquery/jqModal/#examples
  • LightBox2 — не в пример лучше вашего SimpleModal. Проверено!
  • Сорри, ступил )))
    Лайтбокс же только для галлерей…
  • Поверх флеша работает?
    • «Поверх флеша», в принципе, решаемо. Как в Linux-, так и в Windows-версиях браузеров. По крайней мере, для Firefox 3.0.4 (и для Opera 9.6x) — обновление флеш-плагина и прописывание в тегах
      embedded и object свойств.
      Если, конечно, вы этот вопрос имели задать :)
  • Если честно, мне больше facebox нравится.
  • Начиная с версии 1.2.6, плагина jquery.dimensions инкорпорирован в jquery, его не нужно подключать.
    вроде как :)

    p.s.: jgrowl хорош.
  • спасибо, пригодится
  • Я писал о плагине для создания легких модальных окон.

    Тоже, кстати, на jQuery.
    • а я там откамментил)
  • Имхо модальные окна проще сделать без фреймворков
  • Очень удобно, спасибо!
  • Для Оперы я пользовал вот такую функцию:
    где dialog — это тот самый $('#modalContainer')…
    function closeOpera(dialog) {
    dialog.data.fadeOut('fast',function() {
    dialog.container.slideUp('fast',function() {
    dialog.overlay.fadeOut('fast', function () {
    $.modal.close();}); }); });}
    Кстати она существует в примерах на сайте plug-in-а…
  • Зачем нужны такие плагины, которые нужно править руками и костыли подставлять чтобы работало?
  • docs.jquery.com/UI/Dialog, anyone?
    • В IE, как только тронешь окошко, оно скачет как вошь.
  • В демке под IE6 появляются скроллбары при открытом модальном окошке: оверлей не помещается в родителей :(
    В остальном (не считая, конечно, IE 5.5-) всё отлично.

    Спасибо :)
Только авторизованные пользователи могут оставлять комментарии. Авторизуйтесь, пожалуйста.