Скрытая форма для авторизации

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

Для начала прорисуем саму форму:

<div id="AutorizeForm">
    <form>
        <input type="text" name="login" />
        <input type="text" name="password" />
        <input type="submit" value="войти" />
    </form>
</div>

Затем скроем ее от постороннего взгляда:

#AuthorizeBg
{
	background:#000000 none repeat scroll 0%;
	display:none;
	left:0px;
	opacity:0.5;
	filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50);
	position:absolute;
	top:0pt;
	z-index:10;
}
#AutorizeForm
{
  z-index:20;
	display:none;
	width:400px;
	height:200px;
	border-width:0px 1px 1px 0px;
	border-style: solid;
	border-color: #000000;
	background:#ffffff;
	text-align:center;
	position:absolute;
}

И добавим Js сценарий управления отображением формы:

function AutorizeForm(){
    var AutorizeForm = document.getElementById("AutorizeForm");
    var AuthorizeBg = document.getElementById("AuthorizeBg");
    if( window.innerWidth ) {
        width = window.innerWidth;
        height = window.innerHeight;
    } else if(document.documentElement && document.documentElement.clientWidth) {
        width = document.documentElement.clientWidth;
        height = document.documentElement.clientHeight;
    } else if(document.body && document.body.clientWidth) {
        width = document.body.clientWidth;
        height = document.body.clientHeight;
    }
    AutorizeForm.style.left = (width/2 - 200)+'px';

    AutorizeForm.style.display = "block";
    AuthorizeBg.style.display = "block";
   
    AuthorizeBg.style.width = width;
    AuthorizeBg.style.height = height;
   
    AutorizeForm.style.top = (height/2 - 200)+'px';
}

Осталось только добавить управляющий элемент и повесить на него событие:

При желании можно перевести js на jquery.

Интересное

Project Glass — Очки будущего от Google
Компания Google представила суперсовременные «очки дополненной реальности» или Project Glass. Впрочем,...
Отзыв о FirstVDS
При покупке хостинга у FirstVDS мне предложили скидку за годный отзыв в блоге или на форуме....
Проверка сайта на вирусы
Если пользоваться привычной терминологией, то web вирусы не являются вирусами в традиционном...
Git и Bitbucket
Git – это распределенная система контроля версий. Пожалуй, на этом теория заканчивается, так как...

Комментарии

    Чтобы оставлять комментарии, авторизируйтесь

    Войти через OpenID

    рейтинг0+-
    Популярные
    Точки входа
    Наверх