Javascript-форум (https://javascript.ru/forum/)
-   Элементы интерфейса (https://javascript.ru/forum/dom-window/)
-   -   Всплывающая форма в центре страницы для гостевой книги (https://javascript.ru/forum/dom-window/14873-vsplyvayushhaya-forma-v-centre-stranicy-dlya-gostevojj-knigi.html)

angel-13th 04.02.2011 22:07

Всплывающая форма в центре страницы для гостевой книги
 
Здравствуйте, создаю сайт и тут встретился с проблемой, которую я не могу решить.
У меня есть файл javascript
function fetch_object_posleft(elm) {
	var left = elm.offsetLeft;
	while((elm = elm.offsetParent) != null) {
		left += elm.offsetLeft;
	}
	return left;
}
function fetch_object_postop(elm) {
	var top = elm.offsetTop;
	while((elm = elm.offsetParent) != null) {
		top += elm.offsetTop;
	}
	return top;
}
function showC(id,obj) {
	document.getElementById("commentDialog").style.left = document.body.clientWidth / 2 - 150 + "px";
	document.getElementById("commentDialog").style.top = fetch_object_postop(obj) + 25 + "px";
	document.getElementById("commentDialog").style.display = "";
	document.getElementById("recN").value = id;
}
function hideC(id) {
	document.getElementById("commentDialog").style.display = "none";
}
function addsm(what,sm) {
	obj = document.getElementById(what);
	obj.value += ":" + sm + ":";
}


и php файл
<div id="commentDialog" style="position: absolute; display: none; z-index: 1000;">
	<form action="addcomment.php" method="POST">
	  <label for="name"><center>Ваше имя:</center></label>
      <p><input type="text" name="user" maxlength="15" style="width: 225px;" /></p>
      <label for="message"><center>Сообщение:</center></label>
      <p></textarea> <textarea id="c" name="message" maxlength="2000" style="width: 225px; height: 

100px;"></textarea><br /></p>
                        			
                        <center><input type="submit" value="Добавить" class="btn"/>
	          <input type="button" value="Отмена" onClick="hideC();"class="btn"/></center>
	  <p><input type="hidden" name="target" id="recN" /></p>
</form>

</div>


Это форма комментирования в гостевой книге. Когда нажимаешь на кнопку "Комментировать" эта форма появляется рядом с самим словом, а по скольку я меня сделан сайт фиксированный ( если так правильно называется), то Форма открывается за пределами страницы.


Моя просьба к вам заключается в том чтобы зафиксировать эту форму в центре страницы.

Если понадобится , вот ссылка гостевой книги http://www.wooden-fantasy.ru/book/gBook.php

dmitriymar 04.02.2011 23:21

а какое отношение это к javascript имеет? мож стоит чуть чуть почитать про html и особенно про css и самому внести в эту строчку -<div id="commentDialog" style="position: absolute; display: none; z-index: 1000;">
изменение длинной в два слова?

angel-13th 04.02.2011 23:36

Цитата:

Сообщение от dmitriymar (Сообщение 91135)
а какое отношение это к javascript имеет? мож стоит чуть чуть почитать про html и особенно про css и самому внести в эту строчку -<div id="commentDialog" style="position: absolute; display: none; z-index: 1000;">
изменение длинной в два слова?


Хорошо, на счет фиксации я разобрался.Если я правильно понял, надо прописать вместо absolute fixed , но как заставить её открываться в центре страницы у меня не получается.
Знаю только то что если в строчке
document.getElementById("commentDialog").style.top = fetch_object_postop(obj) + 25 + "px";

удалить + 25 + "px" , то форма начинает открываться фактически в центре, но в зависимости от положения кнопки "Комментировать" форма открывается в разных местах.

Значит все таки как-то к скрипту привязано.
Прошу помощи!

dmitriymar 04.02.2011 23:53

причём скрипт ? я тебе написал строку в какую нужно внести изменения и изменения css-это касается элементарной разметки и стилей.

document.getElementById("commentDialog").style.lef t = document.body.clientWidth / 2 - 150 + "px";
где ты явно задаёшь ширину свей всплывающей формы в 300 рх, чтобы от центра её начало смещать на 150 рх? соответственно и с высотой тоже . где стили ? где хоть какая то явная человеческая разметка для элементов всплывающего контейнера,а не то что у тебя слеплено из всего что было и неизвестно как оно до кучи будет в итоге ?-это я том что хоть стоит таблицу сделать и в неё внести элементы формы
тебе это нужно самому, чтобы они не вели себя как им заблагорассудится, в зависимости от браузера или любых изменений стиля
ну а в скрипт даже вчитываться не хочу-ты его не писал сам

angel-13th 05.02.2011 15:17

А что означает эта строка в коде?
document.getElementById("commentDialog").style.top = fetch_object_postop(obj) + 25 + "px";

dmitriymar 05.02.2011 15:42

она выставляет координату верха твоего контейнера

angel-13th 05.02.2011 16:14

dmitriymar, Спасибо!
Я более менее выравнил по центру. Во всяком случае открывается в одном и том же месте.
Вместо этой строки
document.getElementById("commentDialog").style.top = fetch_object_postop(obj) + 25 + "px";

Вписал эту
document.getElementById("commentDialog").style.top = document.body.clientHeight / 2 - 152 + "px";

dmitriymar 05.02.2011 16:19

для фиксед это подходит. для абсолюта не подошло бы.
<div id="commentDialog" style="position: absolute; display: none; z-index: 1000;">
в эту строку вставь жесткие размеры дива. и убери лишние функции какие ты уже не используешь

ksa 05.02.2011 20:10

Цитата:

Сообщение от angel-13th
но как заставить её открываться в центре страницы

На то есть валом рекомендаций


Часовой пояс GMT +3, время: 10:59.