Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 31.10.2010, 13:37
Аватар для OlegSmirnov
Новичок на форуме
Отправить личное сообщение для OlegSmirnov Посмотреть профиль Найти все сообщения от OlegSmirnov
 
Регистрация: 31.10.2010
Сообщений: 2

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

в гугле забанили?
http://javascript.ru/blog/Andrej-Par...enta-elementov
Ответить с цитированием
  #3 (permalink)  
Старый 31.10.2010, 13:55
Аватар для OlegSmirnov
Новичок на форуме
Отправить личное сообщение для OlegSmirnov Посмотреть профиль Найти все сообщения от OlegSmirnov
 
Регистрация: 31.10.2010
Сообщений: 2

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

П.С.
А бухать - да, прятное дело
Ответить с цитированием
  #4 (permalink)  
Старый 31.10.2010, 14:05
Аватар для Gvozd
Матрос
Отправить личное сообщение для Gvozd Посмотреть профиль Найти все сообщения от Gvozd
 
Регистрация: 04.04.2008
Сообщений: 6,246

Сообщение от OlegSmirnov
за пару минут не нашёл и решил спросить
ну и зря.
надо было искать дольше и тщательней
Ответить с цитированием
  #5 (permalink)  
Старый 31.10.2010, 14:14
Особый гость
Посмотреть профиль Найти все сообщения от monolithed
 
Регистрация: 02.04.2010
Сообщений: 4,260

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

<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>


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

Последний раз редактировалось monolithed, 31.10.2010 в 14:20.
Ответить с цитированием
  #6 (permalink)  
Старый 01.11.2010, 11:13
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 14,118

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

<!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>
Ответить с цитированием
  #7 (permalink)  
Старый 01.11.2010, 11:14
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 14,118

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


Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
div по центру chippolino (X)HTML/CSS 5 09.07.2010 10:48
Всплывающее окошко Эллурн Элементы интерфейса 4 10.05.2010 23:28
Расположения главного дива по центру lammeR (X)HTML/CSS 3 03.04.2010 16:16
Как расположить элемент по центру? Cosworth (X)HTML/CSS 16 10.06.2009 16:44
Как сделать окошко с возможностью изменения его содержимого? nolka Элементы интерфейса 2 10.07.2008 08:22