На страницу вашего сайта требуется вывести подсказку или подробное описание чего либо. Оно должно "красиво" появиться при нажатии на ссылку или кнопку, при этом сама страница не должна перегружаться. Простой и быстрый способ решения такой задачи — использование библиотеки jQuery.

В этом уроке мы рассмотрим как сделать выпадающие окна подсказок или сообщений с использованием библиотеки jQuery. В результате должно получится следующее:

1. Сделайте фон страницы серым или голубым (любым, кроме белого, иначе ссылку не будет видно).
2. Подключить к своей странице 2 библиотеки jQuery которые должны находиться в папке js, например так:
   
   

   <script type="text/javascript" src="/js/jquery-1.8.3.js"></script>
    <script type="text/javascript" src="/js/jquery-ui-1.9.2.custom.min.js"></script>

3. Создайте 2 класса box и boxclose в таблицах стилей:
   
   

   <style type="text/css">
    .box{
        position:fixed;
        top:-300px;
        left:20%;
        right:20%;
        background-color:#fff;
        color:#4F4F4F;
        padding:10px;
        border:2px solid #aaa;
        z-index:101;
    }
   
   a.boxclose{
        float:right;
        width:18px;
        height:18px;
        background:transparent url(images/cancel.png) repeat top left;
        margin-top:-7px;
        margin-right:-7px;
        cursor:pointer;
    }
    </style>

4. Вставте в нужном месте сайта ссылку для открытия «выпадающего» окна:
   

   <div class="content">
    <a class="activator" id="activator" style="cursor:pointer; color:#fff">открыть</a>
    </div>

   Ссылка может быть как текстовой (показано в примере), тка и графической.
   
   
5. Создаем еще два блока div, один с идентификатором overlay второй с id box:
   
   

   <div class="overlay" id="overlay" style="display:none;"></div>
    <div class="box" id="box">
       <a class="boxclose" id="boxclose"></a>
       <h2 align="center">Подробное описание</h2><hr width="80%" />
       <p>Тут должен быть текст выпадающей подсказки. В тексте можно использовать HTML-теги форматирования (для текста, картинок, таблиц ит.д.)</p>
    </div>

6. Еще нужно создать небольшой скриптв разделе head, обеспечивающий появление и исчезновение окна.
   

   <script type="text/javascript">
    $(function(){
      $("#dialog").dialog({
         autoOpen: false
      });
    $("#openD").click(function(){
      $("#dialog").dialog("open");
      });
    });
   </script>

7. Далее вставляем в конец страницы скрипт:
   

   <script type="text/javascript">
    $(function() {
     $('#activator').click(function(){
       $('#overlay').fadeIn('fast',function(){
         $('#box').animate({'top':'260px'},500);
       });
     });
     $('#boxclose').click(function(){
       $('#box').animate({'top':'-300px'},500,function(){
         $('#overlay').fadeOut('fast');
       });
     });
   });
   </script>

   
   
   Первая часть скрипта выводит окно на экран, вторая — убирает окно. В каждой части есть регулируемые параметры, которые определяют отступ от верхнего края и время анимации (скорость появления или исчезновения окна). Скрипт нужно поставить в раздел head:

8. Для корректной работы скрипта в правом верхнем углу выпадающего окна должен появился крестик, поместите графический файл cancel.png в папку images.
   
   
   
   
9. Сохраните страницу и проверьте ее работу.