Всплывающие окно при помощи которого можно зайти на форум

Поделиться12009-02-07 22:49:28

Автор: Нира
Форумчанин
Зарегистрирован: 2008-12-14
Приглашений: 0
Сообщений: 16
Уважение: 0
Позитив: 0
Пол: Женский
Провел на форуме:
11 часов 33 минуты
Последний визит:
2010-03-29 22:06:44

гомен если естьэта темка ужено яеё что-то не увидела можете пожалуста дать скрипт при поможи которого когда заходиш на форум точнее его открываеш появляется окно при помощи которого можненько зайти на форум короче быстрый вход и чтоб можно было задать кол-во секунд тамоно торчать будет ^____^ аригато за ранее))

0

Поделиться22009-02-08 10:54:50

Автор: Aska
Форумчанин
Зарегистрирован: 2008-12-06
Приглашений: 0
Сообщений: 257
Уважение: +39
Позитив: +2
Пол: Мужской
Провел на форуме:
1 день 9 часов
Последний визит:
2012-11-24 13:02:16

Нира
в хтмл-низ

Код:

<script language="JavaScript">
    function showLDiv()
    {
    if(  document.getElementById("loginDiv").style.display == 'none' )
         document.getElementById("loginDiv").style.display = ''
    else document.getElementById("loginDiv").style.display = 'none'

    return false;
    }
    function check_form()
    {
    if(document.forms["form_login"].req_username.value=='' || document.forms["form_login"].req_username.value=='') {
    alert('Оба поля обязательны для заполнения');
    return false;
    }
    return true
    }
    url=document.URL
    if(url.indexOf("login.php")==-1  && document.getElementById('navlogin')){
    document.getElementById('navlogin').innerHTML  = "<a href=\"login.php\" onclick=\"return showLDiv()\"><span>Войти</span></a>"
    login = "<center><div id=loginDiv style=\"display: none; \">"

    login += "<form id=form_login name=login method=post action=\"login.php?action=in\" onsubmit=\"return check_form()\">"
    login += "<fieldset>"
    login += "<legend>Введите ваше имя и пароль ниже</legend>"
    login += "<input type=hidden name=form_sent value=1 />"
    login = login + "<input type=hidden name=redirect_url value="+document.URL+" />"
    login += "<br><table width=\"100%\" align=left>"
    login += "<tr><td align=left><b>Имя :</b></td><td align=left><input type=\"text\" id=\"fld1\" name=\"req_username\" size=\"30\" maxlength=\"25\" /></td></tr>"
    login += "<tr><td align=left><b>Пароль :</b></td><td align=left><input type=\"password\" id=\"fld2\" name=\"req_password\" size=\"30\" maxlength=\"16\" /></td></tr>"
    login += "</table>"
    login += "</fieldset>"
    login += "<p class=formsubmit><input type=submit class=button name=login value=\"Войти\" /><br /> <a href=\"register.php\">Еще не зарегистрированы?</a><br /> <a href=\"login.php?action=forget\">Забыли пароль?</a></p>"
    login += "</form>"
    login += "</div></center>"

    document.getElementById('pun-navlinks').innerHTML += login
    }
    </script>

    <style>
    #loginDiv{
        position:absolute;
        z-index: 2;
        background-color : Green;
        border : solid;
        padding-bottom : 5px;
        padding-left : 5px;
        padding-right : 5px;
        padding-top : 5px;
        width: 300px;
    }
    </style>

окошко будет зеленого цвета. Хотите другой цвет - меняйте в строчке background-color : Green; название цвета Green на свое.

Отредактировано Aska (2009-02-08 10:55:44)

0

Поделиться32009-02-11 19:36:12

Автор: Нира
Форумчанин
Зарегистрирован: 2008-12-14
Приглашений: 0
Сообщений: 16
Уважение: 0
Позитив: 0
Пол: Женский
Провел на форуме:
11 часов 33 минуты
Последний визит:
2010-03-29 22:06:44

спс))

0

Поделиться42009-03-23 14:03:30

Автор: Эстелька;)
Форумчанин
Зарегистрирован: 2009-03-18
Приглашений: 0
Сообщений: 26
Уважение: +2
Позитив: 0
Пол: Женский
Возраст: 23 [2000-09-19]
Провел на форуме:
10 часов 2 минуты
Последний визит:
2009-06-22 12:46:34

Aska
Спасибо,очень прегодилось))) Распект тебе))

0

Поделиться52009-04-25 18:17:51

Автор: vikasunshinegirl
Форумчанин
Зарегистрирован: 2009-04-17
Приглашений: 0
Сообщений: 114
Уважение: +1
Позитив: +10
Провел на форуме:
1 день 7 часов
Последний визит:
2010-12-05 18:06:20

Спасибо хороший скрипт

0

Поделиться62009-04-26 19:14:29

Автор: Дизайнер
Новичок
Зарегистрирован: 2008-11-28
Приглашений: 0
Сообщений: 7
Уважение: 0
Позитив: 0
Провел на форуме:
4 часа 17 минут
Последний визит:
2010-01-08 14:04:31

А цвет шрифта синий как изменить? Введите ваше имя и пароль ниже

0

Поделиться72009-06-04 00:16:19

Автор: Коша-сан
Форумчанин
Откуда: из Дракенфурта
Зарегистрирован: 2008-08-17
Приглашений: 0
Сообщений: 692
Уважение: +91
Позитив: +80
Пол: Женский
Провел на форуме:
8 дней 17 часов
Последний визит:
2012-09-26 15:07:22

О! Отлично! =) То что надо! Упрощает задачу входа на форум на одно действие - супер!

Вот так это выглядит на моём форуме. Весьма симпатично, имхо. :love:

0

Поделиться82009-06-04 00:23:20

Автор: Коша-сан
Форумчанин
Откуда: из Дракенфурта
Зарегистрирован: 2008-08-17
Приглашений: 0
Сообщений: 692
Уважение: +91
Позитив: +80
Пол: Женский
Провел на форуме:
8 дней 17 часов
Последний визит:
2012-09-26 15:07:22

Дизайнер написал(а):

А цвет шрифта синий как изменить? Введите ваше имя и пароль ниже

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

Это значит что нужен ещё дополнительный скрипт, позволяющий менять стили.
Осталось дождаться человека, который бы его написал.

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

Отредактировано Lara Dorren (2009-06-05 09:53:23)

0

Поделиться92009-06-09 17:13:46

Автор: Yuki
Форумчанин
Зарегистрирован: 2008-12-30
Приглашений: 0
Сообщений: 336
Уважение: +49
Позитив: +17
Пол: Женский
Возраст: 29 [1994-09-22]
Провел на форуме:
5 дней 3 часа
Последний визит:
2010-08-20 22:02:14

Lara Dorren
Смысл создовать этот крестик если при нажатии на слово войти окошко исчезает.

+1

Поделиться102009-06-09 19:45:02

Автор: Коша-сан
Форумчанин
Откуда: из Дракенфурта
Зарегистрирован: 2008-08-17
Приглашений: 0
Сообщений: 692
Уважение: +91
Позитив: +80
Пол: Женский
Провел на форуме:
8 дней 17 часов
Последний визит:
2012-09-26 15:07:22

Yuki
А сколько людей об этом догадаются? Я тут на днях в процессе пиара своего форума непроизвольно провела исследование на фокус-группе из 55 человек (моих друзей в контакте). Догадались убирать окно нажатием на слово "вход" 0 человек. Несколько людей решило, что окно убирается при перезагрузке страницы. Поголовное большинство вообще не поняло как оно убирается. (Зато кое-кто решился войти и остаться на форуме - нааайс.)
Интерфейс - штука хитрая, здесь как никогда полезны и важны стереотипы, в частности, паттерны зрительной памяти. При желании закрыть вылетающее окно мыша помимо воли тянется в правый верхний угол - а там уппс! облом! - и нифига нет. Чем меньше незнакомых юзеру ребусов - тем лучше. Угу?

Отредактировано Lara Dorren (2009-06-21 14:06:16)

0

Поделиться112009-06-21 21:20:06

Автор: Коша-сан
Форумчанин
Откуда: из Дракенфурта
Зарегистрирован: 2008-08-17
Приглашений: 0
Сообщений: 692
Уважение: +91
Позитив: +80
Пол: Женский
Провел на форуме:
8 дней 17 часов
Последний визит:
2012-09-26 15:07:22

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

Теперь:
1) Окно во всех браузерах отображается примерно посередине форума;
2) Справа вверху появился красивый маленький крестик, нажав на который можно убрать окно;
3) Ну и чёто ещё по мелочи.

<script language="JavaScript">
function showLDiv()
{
if( document.getElementById("loginDiv").style.display == 'none' )
document.getElementById("loginDiv").style.display = ''
else document.getElementById("loginDiv").style.display = 'none'

return false;
}
function check_form()
{
if(document.forms["form_login"].req_username.value=='' || document.forms["form_login"].req_username.value=='') {
alert('Оба поля обязательны для заполнения');
return false;
}
return true
}
url=document.URL
if(url.indexOf("login.php")==-1 && document.getElementById('navlogin')){
document.getElementById('navlogin').innerHTML = "<a href=\"login.php\" onclick=\"return showLDiv()\"><span>Войти</span></a>"
login = "<div id=loginDiv style=\"display: none; \">"

login += "<a id='closeButton' onclick='return showLDiv()' href=''></a>"
login += "<form id=form_login name=login method=post action=\"login.php?action=in\" onsubmit=\"return check_form()\">"
login += "<fieldset>"
login += "<legend>Введите ваше имя и пароль</legend>"
login += "<input type=hidden name=form_sent value=1 />"
login = login + "<input type=hidden name=redirect_url value="+document.URL+" />"
login += "<br><table width=\"100%\" align=left>"
login += "<tr><td align=left><b>Имя:</b></td><td align=left><input type=\"text\" id=\"fld1\" name=\"req_username\" size=\"30\" maxlength=\"25\" /></td></tr>"
login += "<tr><td align=left><b>Пароль:</b></td><td align=left><input type=\"password\" id=\"fld2\" name=\"req_password\" size=\"30\" maxlength=\"16\" /></td></tr>"
login += "</table>"
login += "</fieldset>"
login += "<p class=formsubmit><input type=submit class=button name=login value=\"Войти\" /><br /><br /> <a href=\"register.php\">Ещё не зарегистрированы?</a><br /> <a href=\"login.php?action=forget\">Забыли пароль?</a></p>"
login += "</form>"
login += "</div>"

document.getElementById('pun-navlinks').innerHTML += login
}
</script>

<style>
#loginDiv{
position:absolute;
z-index: 2;
background-color : #f9f9f9;
border : solid;
padding-bottom : 5px;
padding-left : 5px;
padding-right : 5px;
padding-top : 5px;
width: 300px;
left: 40%;
text-align: center;
}

#loginDiv #closeButton {
background: transparent url('http://s39.radikal.ru/i085/0906/04/6c2656bc954c.gif') repeat scroll 0% 0%;
background-position: 0 0;
display:inline-block;
height:16px;
position:absolute;
right:1px;
top:1px;
width:16px;
}

#loginDiv #closeButton:hover {
background-position: 0 -16px;
}
</style>

Выделенное красным - цвет фона, который можно заменить на свой.
Выделенное зелёным - картинка с крестиками (их там два слепленных в одну картинку); тоже можно менять на свою, выдерживая размеры картинки 16 х 32, и прилепливая крестики (2 штука размером 16 х 16) фотошопом пиксель в пиксель друг к другу: