Консультация № 59934
23.10.2006, 22:00
0.00 руб.
0 3 2
Здравствуйте, уважаемые.
Не могли бы Вы подсказать как сделать форму входа пользователя в виде всплывающего окна. Так же, как на Яндексе в правом верхнем углу - "Войти в почту". Каким образом строится вот это окошко (даже не окошко, а просто всплывающая табличка) и её вызов?
Спасибо заранее.

Обсуждение

Неизвестный
23.10.2006, 22:41
общий
это ответ
Здравствуйте, Seventh!
Если я правильно вас понял, то скрипт в приложении. Вставьте его в Html страничку. Открывающееся оно создайте обычным образом в виде дополнительной Html странички с названием Pop_Up.html. Имя файлу можно дать другое, соответственно поменяв это имя и в скрипте на первой страничке.
Успехов!


Приложение:
<!-- Pop Up Script --><script language="JavaScript">function popup (r) { w = 330; h = 225; t = (screen.height-h-20)/2; l = (self.screen.width-w)*10/11; wd = window.open (‘Pop_Up.html‘, ‘w949273581‘, ‘location=no,scrollbars=no,status=no,menubar=no,resizable=no,top=‘+t+‘,left=‘+l+‘,width=‘+w+‘,height=‘+h); return false;}var coo = self.document.cookie;var ref = document.referrer; popup(ref);document.cookie = "browsing=1; path=/";</script><!-- Pop Up Script -->
Неизвестный
25.10.2006, 00:16
общий
это ответ
Здравствуйте, Seventh!
Это можно сделать при помощи стилей. Просто делаем скрытый Div с координатами вверху, ближе к центру(div-контейнер можно и нужно написать в конце, просто применив стиль), а потом при щелчке показываем этот div-контейнер. Можно поэксперементировать со стилями, применяемые к div-контейнеру, чтобы добиться нужного результата. Например, в приведённом ниже html-коде, форма будет располагаться в 10% от верхней границы, в 30% от левой(параметр position, равный absolute обозначает, что позиционирование будет относительно всего документа, а не так где располагается объект), с рамкой в толщину 1px.

Приложение:
<html> <head> <title>Скрытый div</title> </head> <body><a href=‘#null‘ onclick=‘document.getElementById("forma").style.display=""‘>Показать</a><DIV id=‘forma‘ style=‘position:absolute;top:10%;left:30%;display:none;border-style:solid;border-width:1px‘><CENTER>Форма:</CENTER><form action=‘script.php‘><input name=‘str‘><input type=submit></form></DIV> </body></html>
Неизвестный
05.11.2006, 18:26
общий
<b>Я думаю, что вам нужно было вот что:</b><HTML><HEAD><META http-equiv=Content-TYPE content="text/html; charset=windows-1251"></HEAD><BODY> <STYLE>.drag{background-color:#efefef;display:none; left:200px;cursor:move;border:2px darkred solid; font-size: 14px; padding: 0; position: absolute; height: 100px;width:120px;} .head{background-color:silver;text-align:right;width:100%;} .ptr{cursor:hand;cursor:pointer;}</STYLE><b>Демонстрация вывода, перетаскивания и выключения псевдоокна с комментарием.</b>

<SCRIPT>d=document;g=function(a){return d.getElementById(a);}FF=navigator.appName=="Netscape"; //isGecko zMax=1;mouseDown=0; //установки скрипта var posY,posX; //переменные скриптаd.onmousedown=function(e){ if(FF?e.target:event.srcElement.className!="head")return; //отсечка лишнего mouseDown=g(‘drag1‘); posY=(FF?e.pageY:event.y+d.body.scrollTop) -parseInt(mouseDown.offsetTop); posX=(FF?e.pageX:event.x+d.body.scrollLeft) -parseInt(mouseDown.offsetLeft); //нач.точка захвата mouseDown.style.zIndex=zMax++; //подъём слоя}d.onmousemove=function eMove(e){if(!mouseDown)return; mouseDown.style.top= (FF?e.pageY:event.y+d.body.scrollTop)-posY; mouseDown.style.left= (FF?e.pageX:event.x+d.body.scrollLeft)-posX;}d.onmouseup=function(e){mouseDown=0;}d.ondragstart=d.onselectstart=function(){ if(event.srcElement.className=="head") event.returnValue=!1;}</SCRIPT><div id=drag1 class=drag> <div class=head><span class=ptr onclick=g(‘drag1‘).style.display=‘none‘; style="padding:4px">X</span></div> Это и есть псевдоокно</div><span onclick=g(‘drag1‘).style.display=‘block‘; class=ptr>Показать псевдоокно</span></BODY></HTML>
Форма ответа