Форум PHP программистов

[ Поиск ] - [ Пользователи ] - [ Календарь ]

pultter

19.10.2009 - 22:47

Доброго времени суток...
столкнулся с такой проблемой.. как сделать форму для входа:
1. при нажатии на кнопку "войти" чтобы появлялась форма
2. чтобы дизайн сайта не менялся, т.е. форма должна быть как-будто поверх всего сайта...
для примера можете посмотреть следующие сайты:
как НЕ должно быть
как хотелось бы сделать
на обоих сайтах есть кнопочка "войти", но в первом случае дизайн сайта немного меняется (что мне не очень хотелось бы), а во втором - все четко и красиво.

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

Спустя 1 час, 45 минут, 40 секунд (19.10.2009 - 23:33) twin написал(а):

Это не CSS, вернее не только . Это javascript. Скажу по секрету

, эту штуку можно легко свиснуть, посмотрев исходный код в браузере.

Спустя 11 часов, 46 минут, 37 секунд (20.10.2009 - 11:19) ApuktaChehov написал(а):

Да очень просто =)

Делаешь слой с формой, задаешь ему z-index: 2; - это CSS.
А всему остальному нужно задать z-index: 1; - это CSS.
Таким образом получается как бы трехмерность.

Весь сайт у тебя на z-index: 1; (первый слой)
а форма на z-index: 2; (второй слой) поверх первого.

А что бы это появлялась при нажатии на кнопку/ссылку.

задаешь слою с формной style="display:none;"
А потом скриптом JS устанвливаешь значение либо block - показать, либо none - скрыть.

Вот и все.

Спустя 3 часа, 29 минут, 27 секунд (20.10.2009 - 14:49) pultter написал(а):

спасибо за подсказки, но что то не получается у меня:-(
работает не так как хотелось бы..
вот код:

HTML

<html>
<body>
<style>
#one { z-index: 1; }
.log { z-index: 2; }
</style>

<a href="#" onclick="check('ant'); return false">войти</a>
<p id="ant" style="display: none;">
<table class=log><tr><td>
<input type=text><br>
<input type=submit>
</td></tr></table>
</p>

<script type="text/javascript">
function check(value) {
if (document.getElementById(value).style.display = 'none') {
document.getElementById(value).style.display = 'block';
} else {
document.getElementById(value).style.display = 'none';
}

}
</script>
<p id=one><ul>
тут сайт</p>
</body>
</html>

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

Спустя 1 час, 9 минут, 5 секунд (20.10.2009 - 15:58) twin написал(а):

HTML

<html>
<body>
<style>
#one { z-index: 1; }
.log { z-index: 2; }
</style>

<a href="#" onclick="check(); return false">войти</a>
<p id="ant" style="display: none;">
<table class=log><tr><td>
<input type=text><br>
<input type=submit>
</td></tr></table>
</p>

<script type="text/javascript">

function ge(id)
{
return document.getElementById(id);
}
function check() {

ge("ant").style.display = (ge("ant").style.display == 'none')?'block':'none';

}
</script>
<p id=one><ul>
тут сайт</p>
</body>
</html>

Спустя 2 часа, 44 минуты, 23 секунды (20.10.2009 - 18:42) pultter написал(а):

благодарю за помощь:-)
вот что у меня получилось:

HTML

<html>
<body>
<style>
#one { z-index: 1; }
#ant {
width: 0px;
height: 0px;
z-index: 2;}
</style>

<a href="#" onclick="check(); return false">войти</a>

<table id="ant" style="display: none;"><tr><td>
<input type=text><br>
<input type=submit>
</td></tr></table>

<script type="text/javascript">

function ge(id)
{
return document.getElementById(id);
}
function check() {

ge("ant").style.display = (ge("ant").style.display == 'none')?'block':'none';

}
</script>
<p id=one><ul>
тут сайт</p>
</body>
</html>

Спустя 5 месяцев, 14 дней, 3 часа, 11 минут, 54 секунды (4.04.2010 - 21:54) Guest написал(а):

а по мне так этот вариант больше нравится
вот

_____________
Напишу индусский код. Бесплатно

Быстрый ответ:

Здесь расположена полная версия этой страницы.