May 06

Давно ничего не писал - как-то не о чем… Праздники, работа, учеба… Единственное, что реально интересно из этого списка - это работа, но… к сожалению, как раз она и “способствует” отсутствию статей в этом блоге - её много и на блог времени просто не остается… А написать, к счастью, есть о чем. :)

Сегодня речь пойдет о так называемых 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>

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

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

written by fxposter \\ tags: , , ,


23 Responses to “JQuery Dialogs == nyroModal”

  1. 1. Sam Says:

    В Opera кнопочка закрытия окна едет.

  2. 2. FX Poster Says:

    А у меня всё ок… :)

  3. 3. bitfroster Says:

    А у меня проблемы в IE7 – при вызове окна появляются скроллбар, постоянно меняющий свой размер. Складывается впечатление, что проблема с Div 100% который идет в фон.

  4. 4. FX Poster Says:

    Хмм. Таких проблем не замечал. Были другие – с IE6 и фиксированным body, но это уже стандарт, + нежеланием нормально работать с указанными аттрибутами css, вылечилось исправлением одной строки.

  5. 5. Dmitriy Says:

    А я что-то немогу разобраться с callback.
    Как прописать чтобы при появление модального окна выполнялась какая-то JS функция? а потом после закрытия другая?
    (п.с. использую простейшую форму с добавлением ссылке класса nyroModal)

  6. 6. FX Poster Says:
    
    $('#lalala').nyroModal({
      showBackground: function(elts, settings, callback) {
        // type your code here
        elts.bg.css({opacity:0}).fadeTo(500, 0.75, callback);
      },
      hideBackground: function(elts, settings, callback) {
        elts.bg.fadeOut(300, callback);
        // type your code here
      }
    })
  7. 7. kosenka Says:

    Столкнулся со странность nyromodal’a в том, что он как-то странно ресайзит изображения. Причем под IE6 нормально, а вот под FF 3.0.3 появляются “полосы прокрутки”.
    Пример можно посмотреть здесь http://srv15577.ht-test.ru/nyro_resize.jpg (160kb)

  8. 8. FX Poster Says:

    Можно в исходниках покопаться. :) Так сразу не скажу – у меня таких проблем не было.

  9. 9. bitfroster Says:

    А что мешает задать ‘overflow: hidden’?

  10. 10. FX Poster Says:

    И получить не всё изображение, а только его кусок?

  11. 11. kosenka Says:

    Странно, щас решил протестировать на другом проекте – так там нет таких проблем с ресайзом картинок в FF.
    Видимо что-то “засело” в css.
    Вообщем буду разбираться.

  12. 12. Dmitry Says:

    Попробовал nyroModal – удобная штука, вот только у меня вылез такой глюк – открываю в модальном окне форму, заполняю ее, а данные в базу пишутся в UTF-8. Кроме как писать обработчик для переконвертации есть какое другое решение?

  13. 13. FX Poster Says:

    А сайт в какой кодировке?

  14. 14. Dmitry Says:

    win1251.

  15. 15. FX Poster Says:

    Странно, у меня как раз отправляется всё нормально. А вот для получения данных в CP1251 нужно делать header(‘Content-Type: text/html;charset=windows-1251’).

  16. 16. SirBezdelnik Says:

    Ошибка: $(“#cb”).nyroModal is not a function.
    :(
    Версии: nyroModal 1.3. jQuery 1.2.6.

    Кто-нибудь может показать действующий пример nyroModal подключенного не через класс, а прямым вызовом? Желательно с callback функциями, например Alert(‘test’);

  17. 17. Денис Says:

    Хорошая статья, только нужна небольшая правка: в тексте примеров говорится: “из блока с id == “test” ” а в исходном коде везде упоминается #demo. А так, коротко и полезно, спасибо за статью.

  18. 18. FX Poster Says:

    Исправился. :)

  19. 19. Evgeniy Says:

    Не могу понять почему браузер кэширует ajax запрос. Точнее у мну есть файле file.php. Ссылку пишу Ajax request
    Во всех браузерах кроме, как ни странное FF и Opera это работает. Через FF Firebug видно, что nyroModal ни get ни post не шлет, т.е. я так понял все делает через iframe. Как решить данную проблему?

  20. 20. Анатолий Says:

    “3. bitfroster Says:
    June 2nd, 2008 at 12:01

    А у меня проблемы в IE7 – при вызове окна появляются скроллбар, постоянно меняющий свой размер. Складывается впечатление, что проблема с Div 100% который идет в фон.”
    Вот у меня тоже самое, и не могу понять в чем проблема :(
    ================
    “7. kosenka Says:
    October 2nd, 2008 at 17:35

    Столкнулся со странность nyromodal’a в том, что он как-то странно ресайзит изображения. Причем под IE6 нормально, а вот под FF 3.0.3 появляются “полосы прокрутки”.”

    Тоже с этим столкнулся, решил так, заменил DOCTYPE на и заработало

  21. 21. Анатолий Says:

    Форма вырезала код ахаха, ну и фильтр, короче поменяй DOCTYPE на такой как на офф сайте плагина и заработает

  22. 22. Анатолий Says:

    7. kosenka, потратил пару часов и всё же нашел в чем проблема, у меня все get запросы идут через один php файл и как оказалось в одном из подключаемых файлов была кодировка ANSI и вот из за этого и ресайзило, возможно кому то поможет эта инфа )

  23. 23. Александр Says:

    А как сделать так, чтобы попап открывался через некоторое время, после открытия странички, а не при нажатии на ссылку?

Leave a Reply