Всплывающее окно для вывода дополнительной инфоромации на jQuery

Всплывающее окно для вывода дополнительной инфоромации на jQuery

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

Я нашел его только с использованием громоздкой jQuery, но в принципе, остался доволен как функционалом, так и внешним видом.

Что требовалось?

Изначально я хотел просто выводить всплывающее окно с помощью простого JavaScript, как это реализовано на сайте биржи GoGetLinks, но мне требовалось передавать в эти окна некоторую информацию. Заморачиваться с POST или GET запросами как-то шибко не хотелось, так как меня дожидалась подаренная друзьями прогулка на яхте, а на использование чего-то другого меня не хватает. Есть только нарастающие с каждым днем знания в PHP и HTML с CSS. В них никакого JS нет.

Помимо этого нужно было, чтобы содержимое всплывающего окна задавалось на самой странице, где происходит вызов. Поэтому всякие FancyBox`ы отпали сразу.

Мировой разум мне так и не дал какого-то решения, поэтому пришлось использовать jQuery.

Как сделать всплывающие окна у себя на сайте?

Для себя я открыл плагин для jQuery – Reveal. Который достаточно красиво умеет это делать. Может мега дизайнеры скажут, что это пошло и старомодно, но такому старперу как мне, очень нравится.

Чтобы насладится Reveal в действии, нужно надавить на картинку ниже:

Reval

Вот такой он вот...

×

Для того, чтобы внедрить это чудо у себя на сайте нужно выполнить несколько шагов:

  1. Для начала качаем с сайта производителя нужные файлы. Вот ссылка.
  2. Помещаем файлы: reveal.css и jquery.reveal.js в корень своего сайта или в любое другое, удобное для Вас.
  3. Помещаем между 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.
  4. Для того, чтобы какую-то ссылку наделить могуществом Reveal, необходимо в задуманном для этого месте вставить:
    
    <div id="myModal" class="reveal-modal">
      <h1>Reval</h1>
      <p>Вот такой он вот...</p>
      <a class="close-reveal-modal">&#215;</a>
    </div>
    <a href="#" class="big-link" data-reveal-id="myModal" data-animation="fade">
    Reval в действии
    </a>
    

Вроде все просто и доступно. Самое главное, что все что было задумано – исполнено! Жаль, что не получилось на чистом JS, без jQuery и ее плагинов.

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

Комментарии:

  1. Проверка опубликовал комментарий 21 Февраль 2012, 22:11 #

    Круто!

    | Ответить
Имя
e-mail
Сайт
Текст комментария: