Помогите с модальным окном

[lolka84]

Всем привет.

Сделал, что б при клике на элементе выскакивало модальное окно + под ним div, который должен тянуться на всю высоту страницы и закрывать все ее элементы (что б при открытом модальном окне можно было только с ним работать).

Проблема в том, что эта высота определяется по-разному не только в разных браузерах, но и на разных страницах одного сайта

Как сделать некую кроссбраузерность ?

Код:

1. При загрузке страницы вызываем эту функцию:

function onLoad() {

	idModalBoxSpecWrite = document.getElementById("idModalBoxSpecWrite");

	scrollWidth_idModalBoxSpecWrite = document.body.scrollWidth;
	scrollHeight_idModalBoxSpecWrite = document.body.scrollHeight;

	document.getElementById("idModalBlockSpecWrite").style.width = scrollWidth_idModalBoxSpecWrite + "px";
	document.getElementById("idModalBlockSpecWrite").style.height = (scrollHeight_idModalBoxSpecWrite + 916) + "px";				

}

2. При клике на элементе открываем окно:

function ShowModalBox() {

	document.getElementById("idModalBlockSpecWrite").style.opacity = 0.5;
	document.getElementById("idModalBlockSpecWrite").style.display = "block";

	idModalBoxSpecWrite.style.display = "block";

	posleft_idModalBoxSpecWrite = Math.round(scrollWidth_idModalBoxSpecWrite / 2) - 220;

	idModalBoxSpecWrite.style.left = posleft_idModalBoxSpecWrite + "px";
	idModalBoxSpecWrite.style.top = (document.body.scrollTop + 50) + "px";

}

3. HTML самого окна и "заглушки":

<div id="idModalBoxSpecWrite" class="modalBoxSpecWrite">

    < ТУТ КОНТЕНТ ОКНА >

</div>
<div id="idModalBlockSpecWrite" class="modalBlockSpecWrite"></div>

Пример работы - http://mytavatuy.ru/portfolio/clinika/main.html

Клики на "Консультация специалиста" в шапке и "Записаться" в форме рядом с меню.

Как скрипт считает высоту по-разному можете убедиться, нажав на "Консультация специалиста" на 1й странице, а потом на этой - http://mytavatuy.ru/portfolio/clinika/mezotherapy.html

Заранее благодарю за помощь!

[freeneutron]

Используй Jquery. Некоторые могут сказать, что это не круто. Но он как-раз создан для того, что бы не ломать голову над подобными вопросами

[Veseloff]

Я когда-то делал так: вставляем блок в начало или конец body с position: fixed, top: 0, left: 0, height: 100%, width: 100% с полупрозрачным фоном. Вроде было всегда нормально.

[Great Rash]

.shade {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: #000;
  opacity: 0.5;
  filter: alpha(opacity=50);
}

Вот и все, никакого JS, никакого определения высоты. Если нужна поддержка ИЕ6, то пишем expression.