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

Добавить комментарий:

Добавить комментарий

Защитный код
Обновить

 
Яндекс.Метрика