Приветствую.
Недавно передо мной встала такая проблема как упрямая opera mobile с ее бесконечными плюсами и минусами. В том числе, она перекрыла мне вход на форум. Поэтому сегодня, в этот безусловно приятный денек, я потратил пятнадцать минут на поиски, и готов вам предоставить три варианта всплывающего окна входа на форум.
Предупреждаю сразу, тестировал на дополнительном форуме.
Итак, способ #1. Окно-вход.
ХТМЛ-НИЗ
<script type="text/javascript">
var arr=document.getElementsByTagName("li")
i=0
str=document.URL
while(arr[i] ){
if(arr[i].id=="navlogin"){
name=arr[i].innerHTML
name=name.substring(0)
arr[i].innerHTML="<a href=\"#\" onclick=\"login_show()\">Вход</a>"
}
i++
}
</script>
<script>
function $(id)
{
return document.getElementById(id);
}
function login_show() {
$('auth').style.display = "block";
$('authdialog').style.left = '50%';
$('loginfocusneeded').focus();
}
function login_hide() {
$('authdialog').style.position = 'absolute';
$('authdialog').style.left = '-2000px';
$('auth').style.display = "none";
}
document.onkeypress = function(ev){
ev = ev || event;
if(ev.keyCode==27)
login_hide();
}
function ieheight() {
var bg = $('body').offsetHeight;
$('bg').style.height = bg + 'px';
}
window.onload = ieheight;
</script>ХТМЛ-ВЕРХ
<style>
.dialog {width: 290px; border: 7px solid #4C77B6; background: #fff; padding: 12px 15px; z-index: 1000; position: fixed; top: 0px; margin: 200px 0 0 -145px; left: 50%;}
.dialog h6 {margin: 0px; padding: 0px; font-size: 26px; color: #4c4c4c; font-family: Arial, Tahoma, Helvetica, sans-serif; padding: 0 0 12px;}
.dialog span {float: left; color: #7f7f7f; margin: 0 0 3px;}
.dialog a {float: right; font-size: 11px; margin: 0 0 3px; color: #4C77B6;}
.dialog input {font-size:16px; color: #4c4c4c; font-family: Arial, Tahoma, Helvetica, sans-serif;}
.dialog_form {display: block; width: 99%; margin: 0 0 12px; clear: both;}
.dialog_remember {clear: both; padding: 0 0 8px;}
.dialog_remember div {display: block; clear: both; color: #7f7f7f; width: 99%; text-align: left; margin: -2px 2px 0 0;}
.dialog_remember input {margin-left: 0px;}
.auth_bg {height: 100%; width: 100%; position: fixed; z-index: 999; top:0px; left:0px;}
</style>
<!--[if lte IE 7]>
<style>
*html .dialog {position:expression('absolute'); top:expression(parseInt(document.documentElement.scrollTop, 10) + 'px');}
*html .auth_bg {filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="auth_bg.png", sizingMethod="scale"); position:expression('absolute'); top:expression(parseInt(document.documentElement.scrollTop, 10) + 'px');}
</style>
<![endif]-->
<div id="auth" style="display:none;">
<div class="auth_bg" id="bg" onclick="login_hide();"></div>
</div>
<div id="authdialog" class="dialog" style="position:absolute;left:-2000px;">
<h6>Вход</h6>
<form id='login' method='post' action='/login.php?action=in' onsubmit='return my_form(this)'>
<input type='hidden' name='form_sent' value='1' />
<input type='hidden' name='redirect_url' value='index.php' />
<b>Логин:</b><br>
<input type='text' id='fld1' name='req_username' size='25' maxlength='25' onfocus=this.value='' value='NickName'><br><br>
<b>Пароль:</b> <a href=/login.php?action=forget>Забыли пароль?</a><br>
<input type='password' id='fld2' name='req_password' size='16' maxlength='16' / onfocus=this.value='' value='Password'><br><br>
<input type='submit' class='button' name='login' value='Вход на форум!'/>
</form>
</div>Ширина вашего окошка
Окантовка-граница окошка, ее толщина, характер и цвет.
Отступы
Цвет окошка
Предупреждаю сразу: из-за этого скрипта не работает пиар-вход.
Способ #2. Вход в статусе.
Даю скрин, и без него все ясно:
ХТМЛ-НИЗ
<script type="text/javascript">
var a =document.getElementById('pun-status').innerHTML
if (a.indexOf("Гость")!=-1)
{document.getElementById('pun-status').innerHTML="<div class='formal'>"+"<form id='login'"+" class='container'"+" method='post'"+" action='адрес_вашего_форума/login.php?action=in'"+" onsubmit='return my_form(this)'>"+"<fieldset><legend><span>Введите ваше имя и пароль ниже</span></legend><div class='fs-box inline'>"+"<input type='hidden'"+" name='form_sent'"+" value='1' />"+"<input type='hidden'"+" name='redirect_url'"+" value='index.php' />"+"<p class='inputfield required'>"+"<label for='fld1'>Имя <em>(Обязательно)</em></label><br />"+"<span class='input'>"+"<input type='text'"+" id='fld1'"+" name='req_username'"+" size='25'"+" maxlength='25' /></span></p>"+"<p class='inputfield required'>"+"<label for='fld2'>Пароль <em>(Обязательно)</em></label><br />"+"<span class='input'>"+"<input type='password'"+" id='fld2'"+" name='req_password'"+" size='16'"+" maxlength='16' /></span></p></div></fieldset>"+"<p class='formsubmit'>"+"<input type='submit'"+" class='button'"+" name='login'"+" value='Войти' /></p></form></div>"}
function my_form(the_form)
{
var element_names = new Object()
element_names["req_username"] = "Имя"
element_names["req_password"] = "Пароль"if (document.all || document.getElementById)
{
for (i = 0; i < the_form.length; ++i)
{
var elem = the_form.elements[i]
if (elem.name && elem.name.substring(0, 4) == "req_")
{
if (elem.type && (elem.type=="text" || elem.type=="textarea" || elem.type=="password" || elem.type=="file") && elem.value=='')
{
alert("\"" + element_names[elem.name] + "\" это поле обязательно для заполнения в этой форме.")
elem.focus()
return false
}
}
}
}return true
}
</script>
Способ #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 = "<centr><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=centr>"
login += "<tr><td align=left><b>Имя :</b></td><td align=left><input type=\"text\" id=\"fld1\" name=\"req_username\" size=\"21\" maxlength=\"25\" /></td></tr>"
login += "<tr><td align=left><b>Пароль :</b></td><td align=left><input type=\"password\" id=\"fld2\" name=\"req_password\" size=\"7\" maxlength=\"16\" /><span class=formsubmit><input type=submit class=button name=login value=\"Войти\" /></span>"
login += "</form></td></tr>"
login += "</table>"
login += "</fieldset>"
login += "<p><a href=\"register.php\"> Зарегистрироваться.</a> <a href=\"login.php?action=forget\"> Забыли пароль?</a></p>"
login += "</div></center>"
document.getElementById('pun-navlinks').innerHTML += login
}
</script>ХТМЛ-ВЕРХ
<style>
#loginDiv{
position:absolute;
z-index: 2;
background-color : #BEBEBE;
border : solid;
padding-bottom : 10px;
padding-left : 0px;
padding-right : 0px;
padding-top : 5px;
width: 290px;
}
</style>
Цвет вашего окошка
Окантовка-граница
Отступы
Ширина окошка
