js+css реализует замаскированный всплывающий слой в центре (прокрутка с помощью полосы прокрутки окна браузера)

js+css реализует замаскированный всплывающий слой в центре (прокрутка с помощью полосы прокрутки окна браузера)

Скопируйте код кода следующим образом:

<!тип документа html>

<голова>

<meta charset="utf-8" />

<title></title>

<style type="text/css">

*{}{маржа:0;отступ:0;}

html{}{_background:url(about:blank);} /**//* Запретить перепрошивку в IE6, заменить пустые файлы на about:blank, уменьшить количество запросов*/

body{}{background:#fff; шрифт: 12px/1,5 Tahoma,Geneva, //5b8b//4f53, высота без засечек:100%;}

.wrap{}{height:980px;padding-top:20px;text-align:center;}

p{}{font-size:14px;text-align:center;line-height:24px;}

/**//** Маскирующий слой**/

#masklayer{}{

фон:#000;

дисплей: нет;

фильтр: альфа (непрозрачность = 50);

непрозрачность: 0,5;

верх: 0;

осталось: 0;

высота: 100%;

ширина: 100%;

z-индекс: 999;

положение: фиксированное;

_позиция: абсолютная;

_left: выражение (documentElement.scrollLeft + documentElement.clientWidth - this.offsetWidth);

_top: выражение (documentElement.scrollTop + documentElement.clientHeight - this.offsetHeight);

}

/**//** Всплывающий слой**/

#неожиданно возникнуть{}{

дисплей: нет;

ширина: 300 пикселей;

z-индекс: 1000;

осталось: 50%;

верх:50%;

позиция:фиксированная!важно;

поле слева:-150 пикселей ! важно;

_позиция: абсолютная;

_top:expression(eval(document.compatMode && document.compatMode=='CSS1Compat')?

documentElement.scrollTop + (document.documentElement.clientHeight - this.offsetHeight)/2: /**//*IE6*/

document.body.scrollTop + (document.body.clientHeight - this.clientHeight)/2 /**//*IE5 IE5.5*/);

}

.content{}{background:#f3f3f3;border:1px Solid #999;}

.content h3{}{background:#a0a0a0;color:#fff;font-size:14px;height:32px;line-height:32px;padding-left:5px;}

#clickbtn{}{margin-top:20px;}

</стиль>

</голова>

<тело>

<дел>

<р>

Я основной текст Я основной текст Я основной текст Я основной текст Я основной текст Я основной текст Я основной текст

<br />

Я основной текст Я основной текст Я основной текст Я основной текст Я основной текст Я основной текст Я основной текст

<br />

Я основной текст Я основной текст Я основной текст Я основной текст Я основной текст Я основной текст Я основной текст

<br />

Я основной текст Я основной текст Я основной текст Я основной текст Я основной текст Я основной текст Я основной текст

<br />

Я основной текст Я основной текст Я основной текст Я основной текст Я основной текст Я основной текст Я основной текст

</p>

<input type="button" id="clickbtn" value="clike me" />

</div>

<div id="masklayer"></div>

<div id="всплывающее окно">

<дел>

<h3> Расположен ли слой всплывающего окна по центру? </h3>

<p>Центр, центр, центр, центр, центр, центр</p>

<p>Центр, центр, центр, центр, центр</p>

<p>Центр, центр, центр, центр</p>

<p>Центр, центр, центр</p>

</div>

</div>

<тип сценария="текст/javascript">

(функция(маскировщик){

вар clickbtn = document.getElementById('clickbtn');

clickbtn.onclick = функция(){

var popup = document.getElementById('popup');

Masklayer.style.display='block';

popup.style.display = 'блок';

вар ч = popup.clientHeight;

с (popup.style) {

MarginTop = -h/2+'px';

}

}

})(document.getElementById('masklayer'))

</скрипт>

</тело>

</html>