Всем привет.
Сделал, что б при клике на элементе выскакивало модальное окно + под ним 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
Заранее благодарю за помощь!
