На одном своем сайте, посвященном женской тематике, мне понадобилось выводить некоторую информацию во всплывающем окне. Я понимаю, что всплывающие окна – это очень плохо и у большинства пользователей они отключены в браузерах по-умолчанию. Наверное, по этой причине мне пришлось искать какое-то более элегантное решение для того, чтобы вывести нужную информацию.
Я нашел его только с использованием громоздкой jQuery, но в принципе, остался доволен как функционалом, так и внешним видом.
Что требовалось?
Изначально я хотел просто выводить всплывающее окно с помощью простого JavaScript, как это реализовано на сайте биржи GoGetLinks, но мне требовалось передавать в эти окна некоторую информацию. Заморачиваться с POST или GET запросами как-то шибко не хотелось, так как меня дожидалась подаренная друзьями прогулка на яхте, а на использование чего-то другого меня не хватает. Есть только нарастающие с каждым днем знания в PHP и HTML с CSS. В них никакого JS нет.
Помимо этого нужно было, чтобы содержимое всплывающего окна задавалось на самой странице, где происходит вызов. Поэтому всякие FancyBox`ы отпали сразу.
Мировой разум мне так и не дал какого-то решения, поэтому пришлось использовать jQuery.
Как сделать всплывающие окна у себя на сайте?
Для себя я открыл плагин для jQuery – Reveal. Который достаточно красиво умеет это делать. Может мега дизайнеры скажут, что это пошло и старомодно, но такому старперу как мне, очень нравится.
Чтобы насладится Reveal в действии, нужно надавить на картинку ниже:
Для того, чтобы внедрить это чудо у себя на сайте нужно выполнить несколько шагов:
- Для начала качаем с сайта производителя нужные файлы. Вот ссылка.
- Помещаем файлы: reveal.css и jquery.reveal.js в корень своего сайта или в любое другое, удобное для Вас.
- Помещаем между HTML-тегами <HEAD>…</HEAD> код:
<link rel="stylesheet" href="/reveal.css"> <script src="/jquery.reveal.js" type="text/javascript"></script>
Если у Вас до сих пор не подключена jQuery, то еще и вот это помещаем туда же:
<script src="/jquery.min.js" type="text/javascript"></script>
Предварительно скопировав jquery.min.js в корень сайта. Кстати, jQuery должна быть не старее версии 1.6. - Для того, чтобы какую-то ссылку наделить могуществом Reveal, необходимо в задуманном для этого месте вставить:
<div id="myModal" class="reveal-modal"> <h1>Reval</h1> <p>Вот такой он вот...</p> <a class="close-reveal-modal">×</a> </div> <a href="#" class="big-link" data-reveal-id="myModal" data-animation="fade"> Reval в действии </a>
Вроде все просто и доступно. Самое главное, что все что было задумано – исполнено! Жаль, что не получилось на чистом JS, без jQuery и ее плагинов.
С помощью Reval можно сделать очень красивые и эффектные модальные окна, который красиво вылезают и также красиво убегают. Кому не понравится стандартный вид этого окна, могут все переделать под себя. Все открыто.
Круто!