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

15.02.2009

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

 

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

 

 

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

 

#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. Рабочий пример лежит здесь

Теги: html ,javascript ,
Категории: программирование ,javascript ,
просмотров: 914

Комментарии

Нет комментариев

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

Ваше имя: *
Ваш email: *
Ваш сайт:
Комментарий: *
*
Получать комментарии на email

Популярные

10 причин, чтобы отказаться от алкоголя и одна – чтобы употреблять алкоголь

Комментариев: 53 | просмотров: 8184
01.09.2009

О вреде микроволновой печи

Комментариев: 9 | просмотров: 3496
13.12.2009

Весело, весело встретим Новый GOD

Комментариев: 9 | просмотров: 1994
17.12.2009

Масонская символика на долларе

Комментариев: 4 | просмотров: 3899
03.03.2009

PHP. strtolower(strtoupper) и UTF-8

Комментариев: 4 | просмотров: 1762
14.05.2009

Библия. Книга Судей. Глава 19

Комментариев: 4 | просмотров: 1376
30.08.2009

Дискотека Авария. Заколебал ты

Комментариев: 4 | просмотров: 321
01.08.2010

Категории

Календарь

ПнВтСрЧтПнСбВс
12
3456789
10111213141516
17181920212223
24252627282930
31

Цитаты

Многие вещи нам непонятны не потому, что наши понятия слабы; но потому, что сии вещи не входят в круг наших понятий

Козьма Прутков