Сегодня речь пойдет о так называемых dialog widget’ах (периодически, слышу, что их также называют js-popup’ами). Недавно понадобилось реализовать такой функционал в моём “рабочем” проекте и стал вопрос об использовании существующих решений.

В проекте я использую jQuery и, соответственно, выбирал системку, которая базировалась бы на нем. Всё началось с Thickbox’а, который я довольно долгое время и использовал, но… Кое-что мне в нем не нравилось изначально:

• Минимум настроек
• Отличие от большинства плагинов jQuery
• Отсутствие развития (последняя версия вышла в августе 2007-го года и зависела еще от jQuery 1.1x, хотя и с 1.2 тоже работала нормально)

… в итоге эти недостатки привели ко вполне логичному концу - я не мог реализовать 2 разных “диалога” на одной странице не “вторгаясь” в сам код Thickbox’а, причем застрял на мелочи - удиалогов должны были различаться бэкграунды - у одного он должен был быть полностью залит определенным цветом, а второй должен был быть полупрозрачным. Причем в первом случае сделать фон непрозрачным мне пришлось через CSS, хотя гораздо логичнее было бы предоставить эту возможность самой функции создания диалога.

В общем, после недолгих поисков на свет был извлечен молодой, но очень быстро развивающийся
проект “окошек” на jQuery, о котором я сегодня и хочу рассказать - это nyroModal. Проекту еще нет и месяца, но основная функциональность там уже реализована (а как по мне - так больше и не нужно), и что самое главное - им очень удобно пользоваться.

Подробное описание (а также демонтрацию возможностей nyroModal) можно посмотреть на странице самого проекта, а я здесь приведу лишь несколько примеров использования.

Самый простой способ, при котором даже не нужно лезть в JavaScript - это присвоение ссылкам класса nyroModal:

<a href="demo.html" class="nyroModal">Ajax</a>

Эта ссылка откроет вам файл demo.html в “окошке”.

<a href="demo.html#demo" class="nyroModal">Ajax</a>

Эта - сделает почти то же самое, только в окошке будет только инфа из блока с id == “demo” из файла demo.html.

<a href="#demo" class="nyroModal">No Ajax!</a>

А здесь у нас в окно попадет содержимое блока с id == “demo” из текущей страницы.

Если же нужны какие-то дополнительные параметры (значения или callback-функции), то здесь уже без “ручного” JavaScript’а не обойтись:

<a href="#demo" id="no-ajax">No Ajax!</a>
<script type="text/javascript">
$('#no-ajax').nyroModal({
  bgColor: '#FFFFFF',
  showBackground: function(elts, settings, callback) {
    // elts.bg.css({opacity:0}).fadeTo(500, 0.75, callback);
    callback();
  },
  hideBackground: function(elts, settings, callback) {
    // elts.bg.fadeOut(300, callback);
    callback();
  }
})
</script>

Таким образом мы заменим цвет фона на белый + уберем прозрачность и анимацию при появлении/исчезновении фона.

На этом, наверное, будем прощаться. Если остались вопросы - обращайтесь. :)