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

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

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

   Здесь?

   1 2 3 4 5 6 7 8 9

   div#fancy_overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: #666; display: none; z-index: 30;

   Или здесь?

   1 2 3 4 5 6

   div#fancy_inner { position: relative; width:100%; height:100%; border: 1px solid #BBB; background: #FFF;

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

     1 2 3

     .reveal-modal-bg { background: rgba(0, 0, 0, .8); }

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

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

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

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

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

   • Не для вордпресс, а для Drupal.

     Заранее спасиб.

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

3. Всё получилось спасибо, по Вашей методике с Вордпрессом.

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

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

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

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

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

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

     1 2	var myModalDIV = $('#myModal>object').remove(); myModalDIV.appendTo('#myModal');

     Спасибо:)

     • Ничего не выходит таким манером — как только его не варьировал...

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

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

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

6. Спасибо, почитаю :)

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

   • да!

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

   • нужен пример вашего кода.

     без него трудно помочь.

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

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

   • очень просто

     1	$('#myModal').trigger('reveal:close');

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

    Спасибо!

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

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

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

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

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

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

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

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

    • Недостаточно информации вы дали, чтобы вам помочь.

      Скиньте пожалуйста исходники или ссылку.

    • вероятно, вы забыли после

      1	window.close ();

      добавить

      1	return false;

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

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

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

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

      1	background: url(images/alpha.png) repeat 0 0;

14. Спасибо, теперь все ok

15. Не работает программный вызов!

    • почему вы так решили? есть пример или исходники?

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

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

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

      1 2 3 4 5

      <script type="text/javascript"> $(document).ready(function() {   $('#myModal').reveal(); }); </script>

17. Мега респект. Все работает, все как надо.

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

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

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

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

      1	if(cookie) $('.jq-text').text(cookie).show();

      меняете на

      1 2 3 4

      if(!cookie) //программный запуск модального окна; else //запись куки

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

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

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

      1 2 3 4 5

      <script type="text/javascript"> $(document).ready(function() {   $('#myModal').reveal(); }); </script>

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

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

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

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

    • попробуйте так jQuery('#myModal').reveal ();

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

    • смотрите 2web-master.ru/reveal-mod...e-1#comment-4964

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

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

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

    1 2 3 4 5 6 7 8 9 10 11

    $(document).ready(function() { /*   $.cookie('opros');    //проверяем существование куки, в данном случае получаем ее значение*/     var cookie = $.cookie('opros');     alert(typeof cookie) // это я для отладки пытался вывести значение куки, чтобы проверить, удается ли его получить /*   $.cookie('opros');    /*проверяем существование куки, в данном случае получаем ее значение*/   if(!cookie) /*проверяю куку, вот здесь капкан, пробовал и if(cookie!=100) и другие варианты, не срабатывает, почему и стал париться по поводу того, какое значение присваивается этой переменной, почему-то по любому получается string (т.е. текст) не смотря на то, что в куке, скажем 100*/   $('#myModal').opros();      }); // $.cookie('opros', '100', { expires: 28, path: '/'}); /*если эта строка присутствует, то после выполнения скрипта кука прописывается, если ее нет, то кука не прописывается, но с этим более менее понятно. А вот как корректно проверить условие, а еще убедиться, что переменной cookie присвоено корректное значение? */   else $.cookie('opros2','raz',{expires: 28, path: '/'});

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

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

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

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

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

    1 2 3 4 5 6 7 8 9

    $(document).ready(function() {     var cookie = $.cookie('opros'); // присвоили значение, тут все ОК     alert(cookie); //вывели это значение для проверки ОК   if(cookie!='bil') //если значение куки не равно bil , тут тоже все ОК   $('#myModal').opros(); //выполняем скрипт   else $.cookie('opros2','bil',{expires: 28, path: '/'}); //присваиваем куке opros2 значение bil , я специально создаю пока другую куку, чтобы проверить, потом естественно переделаем на opros          }); $.cookie('opros','bil',{expires: 28, path: '/'}); //создаем куку opros со значение bil

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

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

    • ну вы же все уже сделали.

      уберите последнюю строку и замените opros2 на opros

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

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

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

    1 2 3 4 5 6 7 8 9 10 11

    var cookie = $.cookie('opros'); //присваиваем переменной значение куки      if(cookie!='bil')    // проверяем условие, что значение переменной не равно bil     $(document).ready(function() { //выполняем скрипт     $('#myModal').opros();            });   else //иначе, т.е. если значение куки bil $.cookie('opros','bil',{expires: 28, path: '/'}); //присваиваем куки значение bil /*собственно эти две строки не нужны, т.к. после выполнения нашего скрипта мы принудительно присваиваем значение bil куке */ $.cookie('opros', 'uje bil', { expires: 7, path: '/' }); //присваиваем куки значение bil

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

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

      1	$(document).ready(function () {

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

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

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

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

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

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

      1 2	$(document).ready(function() {   $('#myModal').opros();

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

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

      • Выходим за рамки статьи. Нужно смотреть работу других скриптов.

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

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

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

    • Скорее всего у вас ошибка в синтаксисе структуры html файла. Проверьте вашу страницу с помощью сервиса валидации.

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

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

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

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

    1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19

    <!--вызов программно--> $(document).ready(function () {     $('#myModal').reveal(); });     <!--привязываем на вывод по куке див--> здесь содержимое окна   <!--скрипт не отображать див более раза --> if (document.cookie.indexOf('black_seo_poisoned_cooka', 0) == -1) {   date            = new Date ();   date.setYear(date.getFullYear() + 1);   expires         = date.toGMTString();   document.cookie = "black_seo_poisoned_cooka=1; expires=" + expires + "; path=/"; } else                                                                    {   //document.getElementById('div_for_hidding').style.setProperty("display", "none", "");   document.getElementById('div_for_hidding').style ['display'] = 'none'; }

    • не плохое решение.

      • Привет помогите прошу как зделат чтобы кнопка мне нравется от фейсбука была в модолном окне ?

        • Инга, в статье подробно объясняется, как встроить модАльное окно в ваш сайт.

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

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

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

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

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

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

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

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

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

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

    1 2 3

    $(document).ready(function() {   jQuery('#myModal').reveal ();      /* или $('#myModal').reveal(); */ });

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

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

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

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

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

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

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

      1 2 3

      $('#myModal').mouseleave(function(){       $('#myModal').trigger('reveal:close');     });

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

34. Вот ссылкой описание сделал как у меня, помоги, будь добр пожалуйста)

    upwap.ru/2797687

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

      1 2 3

      modalBg.bind('click.modalEvent', function () {           modal.trigger('reveal:close');         });

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

      1 2 3

      modal.bind('mouseleave', function () {           modal.trigger('reveal:close');         });

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

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

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

      1 2 3 4 5 6 7 8 9 10 11

      <script type="text/javascript"> $(document).ready(function() {   $('#myModal').reveal();   this.handler = setTimeout(function () { $('#myModal').trigger('reveal:close'); }, 3000);   }); </script>

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

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

37. спасибо за помощь))))

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

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

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

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

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

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

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

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

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