ресурс для начинающих веб-разработчиков
комплексные веб-услуги по созданию сайтов

Справочный материал по основным языкам программирования и верстки сайтов.

Готовая методика создания простых и сложных динамичных сайтов, с использованием PHP и MySQL.

Использование веб-редактора Adobe Dreamweaver в разработке сайтов.

Использование графических редакторов Adobe Flash, Adobe Photoshop, Adobe Fireworks в подготовке веб-графики.

Разработка веб-сайтов под "ключ".

Разработка отдельных фрагментов сайтов, консультации по вопросам верстки веб-страниц и веб-программирования.

Всплывающее окно авторизации

Всплывающее окно авторизации

Для решения этой задачи нам потребуется:

  1. Выбрать абзац с сообщением Login.
  2. Прикрепить к выбранному абзацу событие click.
  3. Создать переключатель для последовательного отображения и сокрытия формы.

Текст Login находится в элементе абзаца, окруженного ссылкой:

<a href="test38.php"><p id="open" class="main">Авторизация</p></a>

Эта ссылка будет направлять пользователей на другую страницу, содержащую форму авторизации. Она выполняет очень важную роль в случае, если в браузере пользователя отключен JavaScript.

Элемент p находится в элементе a. HTML5 разрешает включать в ссылки такие блочные элементы, как p, h1 и даже div.

Добавим к абзацу обработчик событий click().


$(document).ready(function() {
$("#open").click(function(evt) {

}
});

При первом щелчке должна появиться форма, при втором она должна исчезнуть. Форма должна поочередно отображаться и скрываться. Для этой цели библиотека jQuery предлагает три функции, служащие этой цели:

  1. toggle() - позволяет привязать к выбранному элементу несколько обработчиков событий, между вызовами которых можно переключатся по щелчку мыши.
  2. slideToggle() - применяет к выбранному элементу метод slideDown() если он невидим и slideUp() если он отображен.
  3. fadeToggle() - позволяет показывать или скрывать элементы страницы.

Отличие заключается лишь в том, как выглядит эффект.

Для предотвращения перехода по ссылке используется метод evt.preventDefault().

Следующим шагом введем в скрипт такой код:

$("#activation_form").slideToggle(300);

Этот код выбирает форму авторизации, а затем выдвигает ее, если в данный момент она не видима. Если она видима задвигает ее обратно. Наконец мы заменяем класс абзаца, чтобы форма меняла вид, используя стиль класса CSS.

Ключевое слово $(this) используется для обращения к элементу, реагирующему на событие, в нашем случае к абзацу. Функция toggleClass() добавляет конкрктный класс, если он отсутствует, или удаляет класс, если он присутствует. В данном случае на странице присутствует стиль класса - .close. Этот стиль добавляет другое фоновое изображение, чтобы указать посетителю на возможность закрытия формы авторизации

Чтобы заставить форму появляться, а затем медленно исчезать, нам нужно постоянно проверять, не скрыта ли форма. И если скрыта отобразить ее, если нет скрыть. Для этого мы можем использовать следующий код:


$(document).ready(function() {
$("#open").click(function(evt) {
evt.preventDefault();
if($("#activation_form").is(":hidden")){
$("#activation_form").slideToggle(300);
$(this).toggleClass("close");
}else{
$("#activation_form").slideToggle(600);
$(this).removeClass("close");
}
});
});
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Всплывающее окно авторизации</title>
<style>
#activation_form {
max-width: 350px;
padding: 2%;
border-radius: 8px;
background:#564E4E;
position:absolute;
top:25%;
bottom:20%;
right:25%;
left:25%;
color:#DDCACB;
height:150px;
display:none;
}
#activation_form label {
float: left;
display: block;
clear: right;
}
#activation_form .w100 {
float: right;
max-width: 250px;
width: 97%;
margin-bottom: 1em;
padding: 1.5%;
}
#activation_form .border {
border-radius: 1px;
border-width: 1px;
border-style: solid;
border-color: #C0C0C0 #D9D9D9 #D9D9D9;
box-shadow: 0 1px 1px rgba(255,255,255,.5), 0 1px 1px rgba(0,0,0,.1) inset;
}
#activation_form .border:focus {
outline: none;
border-color: #abd9f1 #bfe3f7 #bfe3f7;
}
#activation_form .border:hover {
border-color: #7eb4ea #97cdea #97cdea;
}
#activation_form .border:focus::-moz-placeholder {
color: transparent;
}
#activation_form .border:focus::-webkit-input-placeholder {
color: transparent;
}
#activation_form .border:not(:focus):not(:hover):valid {
opacity: .8;
}
#submitFF {
padding:6px;
border: none;
border-radius: 3px;
box-shadow: 0 0 0 1px rgba(0,0,0,.2) inset;
background: #669acc;
color: #fff;
margin:0 0 0 23%;
}
#activation_form br {
height: 0;
clear: both;
}
#submitFF:hover {
background: #5c90c2;
}
#submitFF:focus {
box-shadow: 0 1px 1px #fff, inset 0 1px 2px rgba(0,0,0,.8), inset 0 -1px 0 rgba(0,0,0,.05);
}
.main{background:url(images/collapsed.png) no-repeat center left; padding:0 15px; }
.close{background:url(images/expanded.png) no-repeat center left ; padding:0 15px;}
</style>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
$("#open").click(function(evt) {
evt.preventDefault();
if($("#activation_form").is(":hidden")){
$("#activation_form").slideToggle(300);
$(this).toggleClass('close');
}else{
$("#activation_form").slideToggle(600);
$(this).removeClass('close');
}
});
});
</script>
</head>

<body>
<main style="height:300px">
<a href="test38.php"><p id="open" class="main">Авторизация</p></a>
<form enctype="application/x-www-form-urlencoded" id="activation_form">
<label for="nameFF">Login:</label>
<input type="text" name="nameFF" id="nameFF" required placeholder="Введите логин" x-autocompletetype="name" class="w100 border">
<label for="contactFF">Password:</label>
<input type="password" name="passFF" id="passFF" required placeholder="Введите пароль" x-autocompletetype="name" class="w100 border">
<br>
<input value="Отправить" type="submit" id="submitFF">
</form>
</main>

</body>
</html>