Прошу заметить, это не то окно, всплывающее гостям. Данный скрипт сделает так, чтобы при кнопке Вход всплывало окошко с формами для Ника и Пароля.
В хтмл-верх вставляем:
<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>
В хтмл-низ вставляем:
<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>
Результат увидите сами.
Предупреждаю! Я не говорю, что скрипт полностью отлажен. ошибок не замечал, хотя есть пара нюансов. Все недоработки сообщайте, пожалуйста, в эту тему.
