Здесь видео демонстрация работы мода (появляется плавно, на видео не видно)
Пример работы скрипта (не на трекере)
итак.. для начала скачайте архив с нужными файлами (вложен)
этот мод делался под тему main...
должен работать и на других темах, пока не тестил...
и так приступим..
Распределяем файлы из архива:
В папку [КОРЕНЬ_ТРЕКЕРА]/js/ кладём:
-->jquery.form.js
-->jquery.login.js
В папку [КОРЕНЬ_ТРЕКЕРА]/ кладём:
-->takeminilogin.php
В папку [КОРЕНЬ_ТРЕКЕРА]/templates/[ВАША_ТЕМА]/images кладём:
-->login-blank.png
-->login-button.png
-->login-header.png (есть PSD исходник этого файла)
Изменяем файлы:
Открываем файл [КОРЕНЬ_ТРЕКЕРА]/templates/[ВАША_ТЕМА]/overall_header.html
и перед
- Код: Выделить всё
</head>
добавляем
- Код: Выделить всё
<script type="text/javascript" src="{ROOT_PATH}js/jquery.form.js"></script>
<script type="text/javascript" src="{ROOT_PATH}js/jquery.login.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#login-form").submit(function(event) {
var options = {
target: "#resulta",
url: "takeminilogin.php",
};
$("#login-form").ajaxSubmit(options);
return false;
});
});
</script>
<style type="text/css">
/*------------- Login DD ----------------*/
#mask {
position:absolute;
left:0;
top:0;
z-index:9000;
background-color:#000;
display:none;
}
#boxes .window {
position:absolute;
left:0;
top:0;
width:440px;
height:200px;
display:none;
z-index:9999;
padding:20px;
}
#boxes #dialog {
width:375px;
height:203px;
padding:10px;
background-color:#ffffff;
}
#boxes #login {
width:375px;
height:203px;
}
#login .d-header {
background:url({TEMPLATE_PATH}/images/login-header.png) no-repeat 0 0 transparent;
width:375px;
height:150px;
}
#d-close {
position:relative;
}
#d-closea {
position:absolute;
top:39px;
right:17px;
width:20px;
height:20px;
cursor:pointer;
}
#login .d-header input {
position:relative;
top:60px;
left:100px;
border:3px solid #cccccc;
height:22px;
width:200px;
font-size:15px;
padding:5px;
margin-top:4px;
font-family:Verdana, Geneva, sans-serif;
font-size:18px;
}
#login .d-blank {
float:left;
background:url({TEMPLATE_PATH}/images/login-blank.png) no-repeat 0 0 transparent;
width:267px;
height:53px;
}
#login .d-login {
float:left;
width:108px;
height:53px;
}
#result {
position:relative;
width:267px;
height:53px;
}
#resulta {
position:absolute;
top:0px;
right:0px;
width:220px;
height:28px;
text-align:right;
font-family:Verdana, Geneva, sans-serif;
font-size:16px;
font-weight:bold;
}
</style>
а после
- Код: Выделить всё
<body>
добавляем
- Код: Выделить всё
<div id="boxes">
<div id="login" class="window">
<form action="takeminilogin.php" id="login-form" method="post">
<div class="d-header">
<div id="d-close"><div id="d-closea" class="close"></div></div>
<input type="text" name="username" value="{L_USERNAME}" onclick="if(this.value=='{L_USERNAME}') this.value='';"/><br/>
<input type="text" name="password" value="{L_PASSWORD}" onclick="if(this.value=='{L_PASSWORD}') this.value=''; this.type='password';" onfocus="if(this.value=='{L_PASSWORD}') this.value=''; this.type='password';"/>
</div>
<div class="d-blank"><div id="result"><div id="resulta" align="center"></div></div></div>
<div class="d-login"><input type="image" alt="Login" title="Login" src="{TEMPLATE_PATH}/images/login-button.png" style="border:0px none; background:none; padding:0px 0px 0px 0px;"/></div>
</form>
</div>
<div id="mask"></div>
</div>
Должно работать
уупс... забыл самое главное
меняем:
- Код: Выделить всё
<a href="{U_LOGIN}">
на:
- Код: Выделить всё
<a href="#login" name="modal">
Коментируйте !!! (Хотеаб спасибо)