[ Новые сообщения · Участники · Правила форума · Поиск · RSS ]
  • Страница 1 из 1
  • 1
Модальное окно
BigBratherДата: Воскресенье, 14.03.2010, 10:49 | Сообщение # 1
Владыка сайта
Группа: Проверенные
Сообщений: 156
Статус: Offline
Сейчас я вас научу делать модальное окно
Например такое

чем это сплывающие окно лучше стандартного окна 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>


Аська 5523237
По всем вопросам обращайтесь туда.
 
  • Страница 1 из 1
  • 1
Поиск:

More info
Image gallery
contact
Phone: +7 495 287-42-34 Email: info@ucoz.com
CHARLES S. ANDREWS
3139 Brownton Road
Long Community, MS 38915
Location in google Maps