Форум PHP программистов > модальное окно

[ Поиск ] - [ Пользователи ] - [ Календарь ]

quickxyan

7.02.2011 - 10:55

вот нашел в инете код для модального окна.


<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">
Введите данные для входа: <br><br>

<table>
<tr>
<td align="right">* Логин: </td>
<td colspan="2"><input type="text" id="field1" size="10" maxlength="255">
<td><a href="http://www.webobzor.net/">Регистрация</a></td>
</tr>
<tr>
<td align="right">* Пароль: </td>
<td colspan="2"><input type="text" id="field2" size="10" maxlength="255" >
<td><a href="http://www.webobzor.net/">Забыли пароль?</a></td>
</tr>
<tr>
<td></td>
<td><input type="checkbox"></td>
<td>запомнить</td>
</tr>
</table>
<br>
<input type="button" value="Вход" class="but" onclick="LogIn()"> <input type="button" value="Очистить" class="but" onclick="clear()"> <input type="button" value="Отмена" class="but" 

onclick="HideModalbox()">
</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 = "http://www.webobzor.net/";

}

function clear(){
document.getElementById("field1").innerHTML = ""; 
document.getElementById("field2").innerHTML = ""; 


}

function HideModalbox() {

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

}

</script>

почему не работает кнопка Очистить? её я вставлял сам.

и еще, как можно сделать так что бы при клике за окном оно скрывалось, я так понимаю нада просто убрать блокирующий див, но когда експерементирую, то ничего путнего не выходит.

Спустя 11 минут, 45 секунд (7.02.2011 - 10:06) two написал(а):

quickxyan
C помощью jquery это можно сделать намного проще и короче.

Попробуй так:

function clear(){
    document.getElementById("field1").value = ""; 
    document.getElementById("field2").value = ""; 
}

Спустя 31 минута, 44 секунды (7.02.2011 - 10:38) quickxyan написал(а):

спасибо. щас попробую.

так js, я хоть как-то понимаю, а вот jquery нифина не ясно. скачал книгу, но там ничего не нашел по модальным окнам + походу для jquery нада что-то доставлять (или нет)? Всмысле, он же работает под чем-то!?

Спустя 4 минуты, 36 секунд (7.02.2011 - 10:43) quickxyan написал(а):

очистка не работает, но это такое. а вот ищу скрипты на jquery, так нашел почти такой же, так какая разница?

Спустя 10 часов, 26 минут, 45 секунд (7.02.2011 - 21:09) quickxyan написал(а):

Как сделать что бы модальное окно оставалось на месте относительно браузера, если страница прокручивается, то окно стоит!

Спустя 17 часов, 5 минут, 1 секунда (8.02.2011 - 14:15) two написал(а):

quickxyan

position: fixed;

Чтобы стояло на месте:

position: absolute;

По поводу jquery. Это библиотека с помощью которой код js будет намного короче, проще и понятнее.

Вот тут русская документация:
http://jquery-docs.ru/

Скачиваешь библиотеку тут:
http://code.jquery.com/jquery-1.5.min.js
Ложишь в корневую папку сайта. И приклеиваешь её к нужным страницам таким образом:

<script type="text/javascript" src="jquery-1.5.min.js"></script>

_____________
печатаю со скоростью 320 минут в знак...

плюсуем карму не стесняемся

Быстрый ответ:

Здесь расположена полная версия этой страницы.