ВНИМАНИЕ! Опубликовано расписание занятий на 2017-2018 уч. год Подробнее
Toggle Bar

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

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/. Однако, меняйте стили осторожно, можете легко испортить работу формы.

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

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

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

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

    не работает

 
Our website is protected by DMC Firewall!