Всплывающая форма в центре страницы для гостевой книги
Здравствуйте, создаю сайт и тут встретился с проблемой, которую я не могу решить.
У меня есть файл 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 |
а какое отношение это к 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" , то форма начинает открываться фактически в центре, но в зависимости от положения кнопки "Комментировать" форма открывается в разных местах. Значит все таки как-то к скрипту привязано. Прошу помощи! |
причём скрипт ? я тебе написал строку в какую нужно внести изменения и изменения css-это касается элементарной разметки и стилей.
document.getElementById("commentDialog").style.lef t = document.body.clientWidth / 2 - 150 + "px"; где ты явно задаёшь ширину свей всплывающей формы в 300 рх, чтобы от центра её начало смещать на 150 рх? соответственно и с высотой тоже . где стили ? где хоть какая то явная человеческая разметка для элементов всплывающего контейнера,а не то что у тебя слеплено из всего что было и неизвестно как оно до кучи будет в итоге ?-это я том что хоть стоит таблицу сделать и в неё внести элементы формы тебе это нужно самому, чтобы они не вели себя как им заблагорассудится, в зависимости от браузера или любых изменений стиля ну а в скрипт даже вчитываться не хочу-ты его не писал сам |
А что означает эта строка в коде?
document.getElementById("commentDialog").style.top = fetch_object_postop(obj) + 25 + "px"; |
она выставляет координату верха твоего контейнера
|
dmitriymar, Спасибо!
Я более менее выравнил по центру. Во всяком случае открывается в одном и том же месте. Вместо этой строки document.getElementById("commentDialog").style.top = fetch_object_postop(obj) + 25 + "px"; Вписал эту document.getElementById("commentDialog").style.top = document.body.clientHeight / 2 - 152 + "px"; |
для фиксед это подходит. для абсолюта не подошло бы.
<div id="commentDialog" style="position: absolute; display: none; z-index: 1000;"> в эту строку вставь жесткие размеры дива. и убери лишние функции какие ты уже не используешь |
Цитата:
|
Часовой пояс GMT +3, время: 20:40. |