Модальное окно на jQuery - Reveal

10 декабря 2012  5684  верстка, jQuery, скрипты

 

Подключаем стили и скрипт с указанием расположения файлов на сайте.

<link rel="stylesheet" href="/files/reveal.css">
<script src="/js/reveal.js" type="text/javascript"></script>

Вставляем код в любое место веб-страницы.

<div id="myModal" class="reveal-modal">
     <h2>Заголовок</h2>
<!-- Текст, форма, видео, изображение и т.п. -->
     <a title="закрыть" class="close-reveal-modal">×</a>
</div>

Вставляем код в нужное место веб-страницы.

<a title="" href="#" data-reveal-id="myModal">ссылка вызова окна</a>

При необходимости установки второго (третьего) модального окна, нужно присвоить ему другое имя (например, myModal_2). Цвет и прозрачность фона затемнения меняется в стилях.

    

Модальное окно №1

Душа моя озарена неземной радостью, как эти чудесные весенние утра, которыми я наслаждаюсь от всего сердца. Я совсем один и блаженствую в здешнем краю, словно созданном для таких, как я.

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

     ×

Пример №1

Пример №2

    

Модальное окно №2

Проснувшись однажды утром после беспокойного сна, Грегор Замза обнаружил, что он у себя в постели превратился в страшное насекомое. Лежа на панцирнотвердой спине, он видел, стоило ему приподнять голову, свой коричневый, выпуклый, разделенный дугообразными чешуйками живот, на верхушке которого еле держалось готовое вот-вот окончательно сползти одеяло.

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

Ссылка куда-нибудь

×

ZURB Reveal — http://www.zurb.com/playground/reveal-modal-plugin

К сожалению, скрипт не поддерживается версиями jQuery старше 1.6. Для исправления устаревших функций модального окна необходимо подключить скрипт jQuery Migrate.

Например:

<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="https://code.jquery.com/jquery-migrate-1.3.0.min.js"></script>

 

Комментарии для сайта Cackle
наверх