[ Новые сообщения · Участники · Правила форума · Поиск · RSS ]
  • Страница 1 из 1
  • 1
Модальное окно
ТиматиДата: Вт, 2009-09-01, 5:26:39 | Сообщение # 1
Группа: Пользователь
Сообщений: 26
Награды: 0
Репутация: 0
Статус:
чем это сплывающие окно лучше стандартного окна ucoz? А тем, что его можно сделать под свой сайт (изменить цвет и т.д.

Code
<style>  
#main { position: absolute; display: none; top: 0px; left: 0px; background-color: #fff }  

#modalbox { width: 300px; height: 200px; border: 1px solid #ECC113; position: absolute; background-color: #FFEFAF; display:  

none; z-index: 2 }  

div#shade { background-color: #ECECEC; width: 300px; height: 200px; position: absolute; display: none; z-index: 1 }  

.log { text-decoration: underline; cursor: pointer; color: #ff0000 }  

#caption { background-color: #FF6826; border-bottom: 1px solid #fff; color: #fff; font: 11px verdana; padding: 4px;  

font-weight: bold }  

#body { padding: 10px; font: 11px verdana; padding-top: 15px; text-align: center }  

#body table { font: 11px verdana }  

#body a { color: #FF6600 }  

.but { font: 11px verdana }  

</style>  

<body> <span class="log" onclick="ShowModalbox()">Войти</span>  

<div id="shade"></div>   
<div id="modalbox" style="filter: alpha(opacity=100)">   
<div id="caption" style="filter: alpha(opacity=100)">Название окна (меняете на свое)</div>   
<div id="body">   
Тут ваши данные (например $LOGIN_FORM$)   
</div>  

</div>  

<div id="main"></div>   
</body>  

<script>  

var modalbox;   
var shade;   
var scrollWidth;   
var scrollHeight;  

window.onload = function() {  

modalbox = document.getElementById("modalbox");   
shade = document.getElementById("shade");  

scrollWidth = document.body.scrollWidth;   
scrollHeight = document.body.scrollHeight;  

document.getElementById("main").style.width = scrollWidth;   
document.getElementById("main").style.height = scrollHeight;  

}  

function ShowModalbox() {  

document.getElementById("main").style.filter = "alpha(opacity=80)";   
document.getElementById("main").style.opacity = 0.8;   
document.getElementById("main").style.display = "block";  

modalbox.style.display = "block";   
shade.style.display = "block";  

posleft = Math.round(scrollWidth / 2) - 150;   
postop = document.body.scrollHeight - 600;  

shade.style.left = posleft + 7;   
shade.style.top = document.body.scrollTop + 307;  

modalbox.style.left = posleft;   
modalbox.style.top = document.body.scrollTop + 300;  

}  

function LogIn() {  

HideModalbox();   
document.location.href = "тут ссылка на ваш сайт";  

}  

function HideModalbox() {  

document.getElementById("main").style.display = "none";   
modalbox.style.display = "none";   
shade.style.display = "none";  

}  

</script>
 
neioДата: Пт, 2009-09-04, 6:52:30 | Сообщение # 2
Группа: Пользователь
Сообщений: 30
Награды: 0
Репутация: 0
Статус:
Тимати, вот это очень хороший скриптик, если знать как использовать! wink
 
[master]Дата: Вс, 2009-09-06, 11:15:17 | Сообщение # 3
Группа: Модератор
Сообщений: 12
Награды: 0
Репутация: 0
Статус:
Quote (Тимати)
А тем, что его можно сделать под свой сайт (изменить цвет и т.д.

Стандартные ю.Окошки тоже можно изменить, щас скрипт выложу wink

 
  • Страница 1 из 1
  • 1
Поиск: