Reveal — модальные окна на jQuery

Reveal — удивительный плагин.
А удивителен он потому, что имеет много плюсов:

  • его легко внедрять(!)
  • он совместим со всеми современными браузерами(!)
  • очень мало весит(!), всего 1.75KB.

Это значит, что он очень быстр, сексуален и прост во внедрении.

Теперь, давайте посмотрим, как можно легко запустить Reveal

Пример Скачать (.zip, 67 Кб)

Шаг 1: Прикрепляем нужные файлы

Шаг 2: Создаем разметку модального окна

Назначьте для div имя класса reveal-modal и уникальный ID (используйте ID для запуска модального окна). Кроме того, анкор с классом close-reveal-modal даст кнопку для закрытия модального окна (еще модальное окно закроется, если щелкнуть на фон за ним). Самое лучшее место размещения разметки окна — место перед закрытием тэга body.

Шаг 3: Запускаем

Устанавливаем для анкора атрибут data-reveal-id со значением ID модального окна. И в результате, при нажатии на анкор, плагин будет запрашивать элемент с этим ID.

или используем другой вариант запуска (программный)

Настройка плагина Reveal

Каждый хороший плагин можно настраивать:

Хотите знать, как настраивать плагин при использовании data-reveal-id? Принцип таков, берете опцию и добавляете перед ней data- и устанавливаете для него значение.
Вот пример:


82 комментарий на “Reveal — модальные окна на jQuery

  1. Подскажите, плиз, а какой параметр в fancybox.css затемняет экран. хочется немного темнее сделать фон за модальным окном.

    Здесь?

    Или здесь?

    Thumb up 0 Thumb down 0

    • в reveal-modal-bg за это отвечает background со значением rgba(0, 0, 0, .8);

      Если хотите темнее, поставьте rgba(0, 0, 0, .9);

      Thumb up 0 Thumb down 0

  2. Подскажите, пожалуйста. Как можно вывести ссылочку на открытие модального окна на главную страницу сайта (index.php) ? не весь же этот код туда переписывать ??????????

    Thumb up 0 Thumb down 0

    • Для WordPress инициализацию окна лучше всего прописывать в файлах header.php и footer.php,

      а саму ссылку в index.php.

      и весь код переписывать не надо

      Thumb up 0 Thumb down 0

    • К сожалению с друпал не знаком. Видимо можно все сделать по аналогии с WordPress

      Thumb up 0 Thumb down 0

  3. Я вставляю в модальное окно видеоролик, скажите как сделать так, чтобы при закрытии модального окна видеоролик приостанавился?

    Thumb up 0 Thumb down 0

    • смотря чем проигрываете ролик.

      если просто вставили через object то нужно удалять этот элемент с помощью js.

      если использовали какую то библиотеку, то надо смотреть ее API.

      Thumb up 0 Thumb down 0

    • Вставлял через object. Я просто не силен в js. Можете подсказать как это сделать?

      Thumb up 0 Thumb down 0

    • Разобрался, если кому интересно, нужно в файле jquery.reveal.js после строчки modal.unbind ('reveal:close'); добавить следующее:

      Спасибо:)

      Thumb up 0 Thumb down 0

  4. Как сделать что бы данное модальное окно открывалось по центру страницы?

    Thumb up 0 Thumb down 0

    • Есть хороший css сниппет на эту тему.

      Можете посмотреть в сторону этой статьи по центрированию DIV.

      Thumb up 0 Thumb down 0

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

    Thumb up 0 Thumb down 0

  6. Хелп плиз в js не рублю но понимаю что загвоздка там! подключил окно все работает превосходно ток проблема в следущем при закрузке странице загружается контент окна а мне надо чтоб контент загружался только после нажатия клавиши помогите плиз как реализовать что подписать! заранее блогадарин

    Thumb up 0 Thumb down 0

  7. Приветствую!

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

    Thumb up 0 Thumb down 0

  8. Что нужно прописать что бы окно не по ссылке открывалось а при входе на сайт, типа рекламного видео или того типа...

    Спасибо!

    Thumb up 0 Thumb down 0

    • вам подойдет программный вариант запуска плагина.

      разместите его перед закрывающим тэгом </body>

      Thumb up 0 Thumb down 0

  9. Нужна помощь!!!

    Мой сайт работает на MODX.

    Какой код нужно прописать, чтобы при загрузке главной страницы появлялось модальное окно с изображением(flash или просто текстом)???

    Thumb up 0 Thumb down 0

    • вероятно, у вас есть шаблон главной страницы.

      в него нужно вставить код скрытого модального окна с флеш/текстом и программный вариант запуска модального окна.

      Thumb up 0 Thumb down 0

  10. Поставил себе на сайт это окно, но у меня к вам вопрос, у меня в этом окне форма и кнопочка которая передает данные этой формы в скрипт, в котором есть строчка opener.window.location.reload ();window.close ();, она должна перезагрузить страницу и показать новые данные, но этого не происходит, страница не обновляется, помогите пожалуйста, как правильно обновить страницу?

    Thumb up 0 Thumb down 0

  11. Спасибо с первой задачей разобрался, теперь появилась вторая, в ie 7-8 экран не затемняется а становится черным не прозрачным, как с этим можно бороться?

    Thumb up 0 Thumb down 0

    • 7 и 8 эксплореры не понимают альфа-каналы.

      как вариант вместо этих альфа-каналов можно использовать полупрозрачный png файл.

      например в css для ие 7,8 прописать

      Thumb up 0 Thumb down 0

  12. Пробовал, на своем сайте и в исходник (demo.html) запихнуть программный вызов, не работает...

    Thumb up 0 Thumb down 0

    • хм действительно через код, указанный в статье не работает.

      но зато работает так

      Thumb up 0 Thumb down 0

  13. Чего надо «покрутить», чтобы окно открывалось один раз (привязать кукисы?) при входе на сайт (чтобы не каждый раз, раздражать посетителя с различными предложениями, а только один раз, типа если он закрыл окно или воспользовался им, то в следующий раз ему его не показывать). Это понятно, что все это реализуется при помощи куков, вопрос КАК? ибо не силен в js.

    Thumb up 0 Thumb down 0

    • Ответ найдете в статье Чтение и запись cookies на jQuery & PHP.

      Вам нужна запись и чтение с помощью jQuery. Скачайте пример. Посмотрите, как построен код.

      И этот фрагмент кода

      меняете на

      код, который идет дальше не нужен.

      Thumb up 0 Thumb down 0

  14. Не работает программный вызов никак ни 1 вариант ни ваш. Я уже замучался искать способы. Че делать то?

    Thumb up 0 Thumb down 0

    • мой метод точно работает.

      Вы точно все библиотеки подключили? Ошибки браузер какие-нибудь выдает?

      Thumb up 0 Thumb down 0

  15. По ссылке работает прекрасно, а через скрипт пишет что

    $('#myModal').reveal (); не поддерживает это свойство или метод.

    Может Joomla виновата со своими скриптами и плагинами?

    Thumb up 0 Thumb down 0

  16. А подскажите, пожалуйста, как закрыть модальное окно по ссылке в этом модальном окне. Какую функцию прописать в reveal.js и как эту ссылку привязать к этой функции? Спасибо.

    Thumb up 0 Thumb down 0

  17. За советы спасибо, но добиться результата так и не удалось.

    Сделал все как в статье, но вот проверка куки не удается.

    Вот кусок кода

    Буду дальше искать, но если подскажете, буду признателен.

    Thumb up 0 Thumb down 0

    • Значение куки проверил, т.е. переменной присваивается правильное значение, тут вопрос закрыт.

      Переходим к условию...

      Thumb up 0 Thumb down 0

  18. С условием тоже все ОК.

    Итак, следующий код

    Так вот, при выполнении этого кода, если мы последнюю строку убираем (где присваиваем значение куки opros), то все работает, за исключением, что кука с соответствующим значением не создается и как следствие при каждом вызове старницы выполняется скрипт, а этого то как раз и не надо. А если эта строка есть, то на стадии проверки значение куки уже bil, хотя все куки удаляем перед обновлением страницы.

    Продолжаю свои изыскания, результат уже где-то совсем рядом :)

    Thumb up 0 Thumb down 0

  19. Все, задача выполнена.

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

    Если кому поможет конечный вариант

    За ссылки на статьи спасибо!

    Thumb up 0 Thumb down 0

    • Пришлось вернуться :), при встраивании скрипта в движок возник конфликт javascript. Мой код выше, в самом же движке есть вызов скрипта где тоже есть

      как я понимаю это и приводит к конфликту. В общем если вставлен мой скрипт пропадает блок который управляется вторым скриптом. Как добиться, чтобы они не конфликтовали? Может это быть связано с тем, что два раза вызывается анонимная функция? Может мою как-нибудь назвать? Как это сделать тогда?

      Или же проблема в чем-то другом?

      Thumb up 0 Thumb down 0

  20. да ready должна быть только одна в документе. она срабатывает один раз при полной загрузке документа.

    вам нужно или встроить свой скрипт в чужой или чужой в свой.

    Thumb up 0 Thumb down 0

    • Свой в чужой.

      Когда я в своем убираю эти две строки

      то тогда тот «исчезающий» блок виден нормально. Если же, скажем воткнуть мой скрипт «раньше» этого блока, то он отображается нормально и мой скрипт работает, но начинают «отказывать» другие скрипты. Если же вставлять мой скрипт, как положено в блок footer, то тогда все работает нормально, за исключением «исчезающего» блока.

      Чую где-то в функции проблема или в переменных, но где, никак зацепить не могу.

      Thumb up 0 Thumb down 0

  21. Ну что ж, будем рыть дальше, главное уловить в каком направлении двигаться.

    Гугл нам в помощь и упорство :).

    Thumb up 0 Thumb down 0

  22. Все работает, но проблема вот в чем, если в тегах прописать таблицу, то она выезжает наружу скрытого текста, причем мы увидим именно таблицу, если есть другой текст он его сделает скрытым до нажатия на ссылку, а таблица всегда видна и в модальном окне появляться не будет, что может быть не так?

    Thumb up 0 Thumb down 0

  23. 2Web, очень полезная информация... в интернете на эту тему реальный дефицит решения подобной проблемы. Спасибо!

    Подскажите пожалуйста, как можно показывать это окно только один раз, если используется «вариант запуска (программный)»... пожалуйста, был бы очень признателен в помощи... уже как только не пробовал... и как тут описал Eltro, не помогает...

    не думаю, что проблема столь сложная, но думаю её решение было бы в помощь не только мне. Заранее благодарен за ваш ответ!

    Thumb up 0 Thumb down 0

  24. Вот, вроде нашел решение... думаю поможет многим, поместил модальное в отдельный див, в случае если уже показывалось то этому диву присваивается display="none" ...в общем не знаю как всё сделано... но работает :) (наверное можно и сам программный вызов туда пихнуть...)

    Thumb up 0 Thumb down 0

  25. извиняюсь... . но так и не могу скинуть код как есть... но думаю в первом если подумать можно и разобраться... удачи Спасибо всем.! Автору отдельное спасибо!

    Thumb up 0 Thumb down 0

  26. ДрУги! Помощь требуется!

    Не пойму в чем дело... хочу использовать модальное окно, при вызове формы авторизации (вебасист). На главной прописываю ссылку на шаблон формы авторизации, вставляю уникальный айди. Шаблон авторизации обрамляю в дивы с тем же айди и что получается — При клике с главной переходишь на страницу авторизации Без модального окна, и если только нажать повторно на ссылку входа (уже на странице авторизации) вываливается модальное окно... Что не так делаю?? Для эксперимента в папке с скритптом и демо.хтмл сделал еще один хтмл файл с сылкой на демо хтмл, и прописал айди модального окна...и тоже самое, загружается сначала список ссылок на примеры, и только после можно воспользоваться примером...

    Thumb up 0 Thumb down 0

    • вы кажется немного запутались в коде.

      1. на главной у вас должен быть контейнер для модального окна

      2. ссылка вызова этого окна не должна вызывать шаблон формы авторизации.

      сначала заставьте появлятся хотя бы пустое модальное окно на главной. если это удастся, приступайте к шагу 3.

      3. попробуйте вставить код формы авторизации в контейнер на главной.

      Thumb up 0 Thumb down 0

  27. Подскажите, пожалуйста.

    вот автоматический запуск модального окна

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

    а в идеале было бы, если бы через 20 секунд выскакивало модальное окно.

    Всем заранее спасибо за ответы.

    Thumb up 0 Thumb down 0

    • трудно вам помочь по таким описаниям. нужна ошибка которая появляется, когда пытаетесь запустить этот скрипт. для этого нужен бразуер, в котором можно посмотреть эту ошибку (chrome, opera, firefox)

      лучше если вы скините ссылку на сайт мне в почту, я посмотрю сам и уже смогу дать рекомендации.

      Thumb up 0 Thumb down 0

  28. Здравствуйте, подскажите как сделать чтоб при отводе курсора от всплывающего окна оно автоматом закрывалось, а не через ссылку и просто тыканью по экрану?

    Thumb up 0 Thumb down 0

    • например вот так

      где #myModal — это id вашего всплывающего окна

      Thumb up 0 Thumb down 0

    • попробуйте в reveral.js после строки

      добавить следующий код

      кажется вам нужен был такой результат

      Thumb up 0 Thumb down 0

  29. здравствуйте, мне вот надо, чтоб модальное окно, через некоторое время само закрылось, это как можно сделать?

    Thumb up 0 Thumb down 0

    • Вот такой код сам открывает и закрывает модальное окно через 3 секунды.

      Thumb up 0 Thumb down 0

  30. а можно ли еще при открытом модальном окне скрол задней страницы отключить, а то при прокрутке окно смещается.

    Thumb up 0 Thumb down 0

    • тут сложно что-то посоветовать. вам нужно посмотреть в поисковике различные решения отключения скрола для различных браузеров.

      Thumb up 0 Thumb down 0

  31. Огромнейшее спасибо! все доступно расписано — доработка скрипта возможно уже при просмотре коментариев и ваших подсказок!

    Thumb up 0 Thumb down 0

  32. Добрый день! Подскажите пожалуйста как заблокировать прокрутку контента за модальным окном? И как можно открывать модальные окна из одного модального окна в нем же? (т.е. закрывая старое или обновляя данные в нем)

    Thumb up 0 Thumb down 0

    • на счет управления скролом мыши можно посмотреть здесь github.com/brandonaaron/jquery-mousewheel

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

      Thumb up 0 Thumb down 0

  33. Здравствуйте! В модальном окне вызывается форма обратной связи. При отправке аяксом выводится сообщении вроде(ваше сообщение отправлено, ваше имя:xxxx, ваш тел:xxxx, ваше сообщение:xxxxx) Но при нажатии «отправить» модальное окно скрывается и сообщение становится невидимым. Скажите пожалуйста как сделать так чтобы окно оставалось активным и лишь при нажатии на крестик скрывалось?

    Thumb up 0 Thumb down 0

  34. Подскажите, как в свойствах checkbox добавить возможность открытия модального reveal-окна? Я пишу так:

    и не работает...

    Thumb up 0 Thumb down 0

  35. Всем добрый день! Автору спасибо за детальные пояснения. Поставил и все работает. Единственное «но». В окне выводится текст и баннеры со стороннего сайта (формат jpg). После того как кликаешь на закрытие окна, окно закрывается и потом на мгновенье эти самые баннеры снова появляются без текста. Кто-нибудь встречал такое? Поделитесь решением пожалуйста.

    Thumb up 0 Thumb down 0

  36. Подскажите пожалуйста как очистить содержимое окна при закрытии, сейчас использую в окне кастомные элементы форм, после закрытия окна остается галочка у chekbox ( Помогите разобраться, спасибо заранее за помощь

    Thumb up 0 Thumb down 0

Оставить комментарий