БЕСПЛАТНЫЕ УРОКИ. Создание сайтов

jQuery. Как создать всплывающие окна авторизации

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

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

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

autoriz 1

demo      skachat

  1. Создайте страницу или выберите уже готовую, куда нужно вставить всплывающее окно авторизации, например такую:

    autoriz 2
  2. Вставляем в нужное место страницы ссылку и/или катинку для вызова окна авторизации. Например, так:

    autoriz 4
  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, то внимательно смотрите на то, что за библиотки уже подключе и можно ли обойтись ими, не подключая новые из скачанного архива. В противном случае разные библиотеки между собой иногда конфликтуют, и какая из них "выживет" не известно.

Добавить комментарий
  • Гость - Татьяна

    Как изменить координаты всплывающего окна? У меня упорно всплывает так, что нужно прокручивать страницу. Причём код находится сразу после body

  • Здравствуйте.
    Все стили прописаны в файле jquery-ui-1.9.2.custom.css, который находится в папке css/ui-lightness/. Однако, меняйте стили осторожно, можете легко испортить работу формы.

  • Гость - Владислав

    Я хочу сделать свой стиль, как мне убрать старый

  • "не работает" - слишком неточно. Можете конкретно сказать, что именно не работает, и что Вы делали для проверки работы скрипта?
    Скрипт скачайте с сайта, извлеките все из архива и только потом открывайте страницу с примером работы данной статьи.

  • Гость - Гость

    не работает