При разработке сайта бывает ситуация, когда на странице не хватает места для форм ввода логина, пароля и кнопки "ВОЙТИ". Решить эту проблему всплывающего окна авторизации можно очень просто применив технологию jQuery.

В этом уроке я расскажу как поместить на страницу ссылку, которая вызывает появление небольшого окна с нужными формами авторизации на сайте. 

В результате должно получиться примерно как на картинке:

1. Создайте страницу или выберите уже готовую, куда нужно вставить всплывающее окно авторизации, например такую:
   
   
2. Вставляем в нужное место страницы ссылку и/или катинку для вызова окна авторизации. Например, так:
   
   
3. Вставляем в HTML-коде ссылку, любую из нижеприведенных:
   
   

   a.

   <a id="openD" href="#" class="podval">Вход</a>

   b.

   <span style="cursor: pointer" id="activator"><img src="/images/vhod.png" border="0" id="openD" /></span>

   с.

   <a id="openD" href="#">Вход <img src=images/vhod.png border=0></a>

   
   
   
4. В раздел body вставьте код всплывающего окна:
   

   <div id="dialog" title="Авторизация"> 
      <form name="fr" method="post" action=""> 
         <span class="style4"> e-mail</span>: 
         <input name="login" type="text" size="10"><br> 
         <span class="style4"> Пароль</span>: 
         <input name="pass" type="password" size="8"> <br> 
         <input type="submit" name="Submit" value="Войти"> 
         <span class="style4"><a href="/">Регистрация</a></span> <br> 
         <a href="/remmem_pass.php">Напомнить пароль</a> 
      </form> 
    </div>

5. Копируем 2 папки js и css со стилями библиотекой и плагинами в свою папку:
6. Подключаем стиль и баблиотеки jQuery к странице. Для этого нужно вставить в рахдел head cnhjrb^
   

   <link href="/css/ui-lightness/jquery-ui-1.9.2.custom.css" rel="stylesheet" type="text/css" />
    <script src="/js/jquery-1.8.3.js" type="text/javascript"></script>
    <script src="/js/jquery-ui-1.9.2.custom.min.js" type="text/javascript"></script>

7. Вставляем в раздел head  следующий скрипт:
   

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

8. Сохраняем страницу и просматриваем работу вашей всплывающей формы авторизации.

 p.s. Если до этого на Вашей странице уже использовали какие-либо библиотеки jQuery, то внимательно смотрите на то, что за библиотки уже подключе и можно ли обойтись ими, не подключая новые из скачанного архива. В противном случае разные библиотеки между собой иногда конфликтуют, и какая из них "выживет" не известно.