Форум

OlegSmirnov · #1 (**permalink**) 31.10.2010, 13:37

Привет всем!
Простите, если это уже было, просто даже не знаю как поисковый запрос составить... Да и я только зарегистрировался тут, совсем форум не знаю, со временем, надеюсь, буду тоже тут помогать другим...
Вопрос вот такой - как сделать всплывающее окошко, расположенное ровно по центру? То есть пользователь кликает по ссылке и появляется окошко с формой для загрузки фото (там, название фото, инпут для присоединения файла к форме и ещё пара текстовых инпутов). Как сделать форму, как сделать всплывающее окно - всё вроде понятно, не знаю только как сделать, чтобы это окно всегда появлялось ровно по центру "рабочей области", так сказать, то есть по центру той части окна браузера, где отображается сайт, за вычетом всяких браузерских панелей... Причём сделать так, чтобы оно появлялось ровно по центру, независимо от того, на сколько прокручена страничка вверх/вниз. Чтобы прокрутка не сбивалась (не перематывалась квеху и пр), а страничка оставалась на месте, но по центру (того места, куда пользователь смотрит сейчас) появлялось моё новое окошко (ну... не совсем окошко, просто div элемент с формой).
Может я не совсем понятно выразился - вот пример того, что надо:
http://www.shiba-pedigree.ru/details.php?id=63317
Там на страничке если нажать кнопку Delete (не боитесь, если Вы не авторизованы на сайте в качестве админа - ничего не удалится, просто предупреждение выскочит), так вот интересно, как сделать такое окошко. Я пытался разобраться как это там реальзовано, но мозг вскипел. Там фреймворк YAHOO, это пара десятков тысяч строк js кода, одно ссылается на другое, разобраться трудновато для меня.
Впринципе, нужны какие-то js функции-методы, позволяющие определить ширину-высоту рабочей области браузера (для разных браузеров, если оно отличается) и координату, на сколько страничка прокручена вниз как определить...
Ну, надеюсь, вы поняли меня.
И извиняюсь за много букв...

Gvozd · #2 (**permalink**) 31.10.2010, 13:48

в гугле забанили?
http://javascript.ru/blog/Andrej-Par...enta-elementov

OlegSmirnov · #3 (**permalink**) 31.10.2010, 13:55

Gvozd, спасибо за полезную ссылку!

Пошёл читать. Гугл не банил, но я... Ну извиняюсь в общем, за пару минут не нашёл и решил спросить. Ещё раз спасибо

П.С.
А бухать - да, прятное дело

Gvozd · #4 (**permalink**) 31.10.2010, 14:05

Сообщение от OlegSmirnov

за пару минут не нашёл и решил спросить

ну и зря.
надо было искать дольше и тщательней

monolithed · #5 (**permalink**) 31.10.2010, 14:14

Как-то так, правда допилить еще придется:

<div style="background: red; position: absolute; width: 100px; height: 100px;" id="div"></div>

<script type="text/javascript">
window.onload = function(){
    var div = document.getElementById('div')
    div.style.top = (document.documentElement.clientHeight - div.offsetHeight)/2 + 'px';
    div.style.left = (document.documentElement.clientWidth - div.offsetWidth)/2 + 'px';
};
</script>

Кстати, полезно будет ознакомиться

ksa · #6 (**permalink**) 01.11.2010, 11:13

Добавлю и свой вариант... Чисто ЦССный по позиционированию.

<!DOCTYPE html>
<html>
<head>
<style>
* {
	margin: 0;
	padding: 0;
}
html,
body {
	width: 100%;
	height: 100%;
}
#box {
	position: fixed;
	top: 50%;
	left: 50%;
	width: 300px;
	height: 200px;
	margin-top: -100px;
	margin-left: -200px;
	background-color: silver;
	border: 1px solid;
	display: none;
}
#box label {
	display: block;
}
#content {
}
</style>
<script>
function On() {	
	document.getElementById('bLoad').disabled=true
	document.getElementById('box').style.display='block'
}
function Off() {	
	document.getElementById('bLoad').disabled=false
	document.getElementById('box').style.display='none'
}
</script>
</head>
<body>
<div id='box'>
	<label for='f1'>File</label>
	<input id='f1' type='file' />
	<br />
	<label for='f2'>Comment</label>
	<input id='f2' type='text' />
	<br />
	<label for='f3'>Name</label>
	<input id='f3' type='text' />
	<br />
	<br />
	<input type='button' value='Save' onclick='Off()' />
</div>
<div id='content'>
	<p>Всякий разный контент... Всякий разный контент...Всякий разный контент...
	</p>
	<input id='bLoad' type='button' value='Load file' onclick='On()' />
</div>
</body>
</html>

ksa · #7 (**permalink**) 01.11.2010, 11:14

Блок будет по центру даже при скролинге контента...

Форум

Справочник

Discord чат

Курсы javascript