Сообщений в теме: 6

[l17l]

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

авторизация:

 Безым1111янный.jpg   91.1К   58 Количество загрузок:

после авторизации, поля авторизация и регистрация пропадают:

 Безы111111м1111янный.jpg   53.36К   55 Количество загрузок:

Авторизацию вырезал из файла и вставил в сайт в index, можно назад запихать код в фаил, authorization.tpl.html

Код авторизации:

{if $isadmin eq "yes"}
<div class="corz"><a href="{$smarty.const.ADMIN_FILE}">{$smarty.const.ADMINISTRATE_LINK}</a></div>
<div class="corz"><a href="index.php?user_details=yes">{$smarty.const.MY_ACCOUNT_LINK}</a></div>
<div class="corz"><a href="index.php?logout=yes">{$smarty.const.LOGOUT_LINK}</a></div>
{elseif $log ne ""}
<div class="corz"><a href="index.php?user_details=yes">{$smarty.const.MY_ACCOUNT_LINK}</a></div>
<div class="corz"><a href="index.php?logout=yes">{$smarty.const.LOGOUT_LINK}</a></div>
{else}
<div class="corz"><a href="{$smarty.const.ADMIN_FILE}" title="Авторизация на сайте" onClick="document.getElementById('wind').style.display='block'; return false;">Авторизация на сайте</a></div>
<div class="corz"><a href="http://----------/index.php?register=yes" title="Регистрация на сайте">Регистрация на сайте</a></div>
<div id="wind">
<div align="center">
<table cellspacing="0" align="right">
<tr><td style="padding: 0 3 0 3; background-color: #FFE9E3;
font-family: Verdana; font-size: 12pt; color: #000; font-weight: bold;" onClick="document.getElementById('wind').style.display='none'; return false;" onMouseOver="this.style.cursor='pointer'" onMouseOut="this.style.cursor='default'">X</td>
</tr>
</table>
<form action="index.php" method=post id="userform">
<table border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td align="left"></td>
</tr>
<tr>
<td align="left"><input name="user_login" type="text" class="inbr" style="width: 200px; height:18; background-color:#FFE9E3" value="Логин"></td>
</tr>
<tr>
<td style="padding-top: 6px;" align="left"></td>
</tr>
<tr>
<td align="left"><table cellspacing="0" cellpadding="0" style="margin-top: 2px;">
<tr>
<td valign="middle" align="left"><input name="user_pw" type="password" class="inbr" style="width: 200px; height:18;background-color:#FFE9E3" value="Пароль"></td>
</tr>
</table></td>
</tr>
<tr>
<td align="left">
<div style="margin-top:15px"></div>
<a href="#" onclick="document.getElementById('userform').submit(); return false"><strong>{$smarty.const.BUTTON_ENTER_AUTH}</strong></a>&nbsp;&nbsp;|&nbsp;&nbsp;<a href="index.php?register=yes">{$smarty.const.REGISTER_LINK}</a>&nbsp;&nbsp;|&nbsp;&nbsp;<a href="index.php?logging=yes">{$smarty.const.FORGOT_PASSWORD_LINK}</a></p></td>
</tr>
</table>
<input type="hidden" name="enter" value="1">
</form>
</div>
</div>
{/if}

Стили, для всплывающего окна

.dlink {
color: #0000FF;
font-weight: bold;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 16px;
}
#wind {
position: absolute;
width: 300px;
left: 0;
top: 203px;
border: 3px solid #E23C7A;
display: none;
z-index: 10;
overflow: hidden;
background-color:#FFC9E1;
color:#000000;
text-align:center;
padding:5px;
}

стили кнопок, авторизация, регистрация и т.д

.corz {
color: #000;
text-decoration: none;
margin-top: 5px;
margin-bottom: 5px;
text-align:  center;
}
.corz a{
color: #000;
text-decoration: none;
margin-top: 5px;
margin-bottom: 5px;
text-align:  center;
}
.corz a:hover{
color: #E54481;
}

Стиль окна можете оформить как вам угодно и кнопок, все на css

[zcz]

Имхо, проще на библиотеке highslide сделать. И симпатичнее выглядит.

[badisoft]

Имхо, проще на библиотеке highslide сделать. И симпатичнее выглядит.

ИМХО, проще как раз на CSS (а-ля "товар добавлен в корзину", которое появляется на время добавления товара в корзину).
Но мне кажется, что приведенный код ну ОЧЕНЬ громоздок для этой задачи. Откуда-то стянут целиком?

Ну а симпатичность организовать уж точно на CSS будет проще .

[zcz]

про симпатичней, я имел в виду по сравнению с тем, что представлено в примере.
По поводу стилей - да, согласен. при клике открываем окошко (и можно туда картинок всяких разных навтыкать), при клике же и закрываем.
http://www.elsodom.ru/ вот тут реализовывал подобное.

[l17l]

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

можно все на div сделать, убрать в коде html и все

[Valentin]

Извеняюсь за вопрос, а зачем вообще форму регистрации выводить отдельно?
Разве не удобние когда она объеденена с формой оформления заказа?
Ведь для клиентов лучше когда меньше лишних шагов.
Да и когда-то читал отзывы о тестировании магазинов, там советовали слить регистрацию и оформление.
Чтобы после оформления клиент автоматом зарегистрировался и получил данные на почту, а доп инфу можно выведать и после. Ведь данные для связи всё равно будут в базе.

[l17l]

Тут нет шагов, тут клик, я это сделал для того что бы не портить внешний вид и что бы авторизация была выше и без лишних полей, для удобства, можно вообще маленькую кнопку сделать, )) минимизация )