В предыдущей главе я рассказал, что на замаскированную страницу можно добавить модуль редактирования частичной области. В этой главе я представлю родительскую страницу для отображения слоя маски и всплывающего полупрозрачного диалогового окна. Диалог — это всплывающая подстраница, div.
Визуализации следующие:
Конкретная реализация кода выглядит следующим образом:
Скопируйте код кода следующим образом:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<ГЛАВА>
<TITLE> Новый документ </TITLE>
<META NAME="Генератор" CONTENT="EditPlus">
<META NAME="Автор" CONTENT="">
<META NAME="Ключевые слова" CONTENT="">
<META NAME="Описание" CONTENT="">
</HEAD>
<style type="text/css">
<!--
.mydiv {
цвет фона: #FFFFFF;
граница: сплошная 5 пикселей #c7c7c7;
выравнивание текста: по центру;
высота строки: 20 пикселей;
размер шрифта: 12 пикселей;
начертание шрифта: жирный;
z-индекс: 999;
ширина: 500 пикселей;
высота: 300 пикселей;
осталось: 50%;
верх:50%;
Margin-left:-150px!important;/*FF IE7 это значение равно половине его собственной ширины*/
Margin-top:-60px!important;/*FF IE7 Это значение равно половине его высоты*/
маржа-верх: 0 пикселей;
позиция: исправлена! важно;/* FF IE7*/
позиция: абсолютная;/*IE6*/
_top: выражение(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*/
}
.bg,.popIframe {
цвет фона: #666; дисплей: нет;
ширина: 100%;
высота: 100%;
осталось: 0;
верх:20%;/*FF IE7*/
фильтр:альфа(непрозрачность=50);/*IE*/
непрозрачность: 0,5;/*FF*/
z-индекс: 1;
позиция: исправлена! важно;/*FF IE7*/
позиция: абсолютная;/*IE6*/
_top: выражение(eval(document.compatMode &&
document.compatMode=='CSS1Compat') ?
documentElement.scrollTop + (document.documentElement.clientHeight-this.offsetHeight)/2 :/*IE6*/
document.body.scrollTop + (document.body.clientHeight - this.clientHeight)/2);/* www.VeVB.COM IE5 IE5.5*/
}
-->
</стиль>
<скрипт>
функция showDiv(tag,tid,lawyerName){
вар Light1 = document.getElementById (тег);
Light1.style.display='блок';
document.getElementById('bg').style.display='block';
}
функция closeDiv(){
document.getElementById('popDiv').style.display='none';
document.getElementById('bg').style.display='none';
}
</скрипт>
<ТЕЛО>
<div id="popDiv" style="display:none;">
<предварительно>
Храм цветения персика (отрывок Чжан Сяоси)
В Таохуау есть Храм Цветения Персика, а под Храмом Цветения Персика находится Фея Цветения Персика.
Фея цветения персика сажала персиковые деревья и собирала цветы персика в обмен на вино.
Когда я трезв, я просто сижу перед цветами; когда я пьян, я засыпаю под цветами.
Пьяные и пьяные, мы просыпаемся изо дня в день, а цветы цветут и опадают год за годом.
Я бы хотел умереть в старости и проводить время за вином, а не кланяться перед каретой.
Богатым достаточно машин, пыли и лошадей, а бедным — винных чаш и веток.
Если сравнивать богатых и знатных с бедными и смиренными, то один находится на земле, а другой — в небе.
Если бы цветы и вино сравнивали с колесницами и лошадьми, ему пришлось бы водить машину, а мне нечего было бы делать.
Другие смеются надо мной за то, что я сумасшедший, но я смеюсь над другими, потому что они не видят этого насквозь.
Здесь нет могил героев Пяти Гробниц, нет цветов и вина для обработки полей.
</pre>
<a href="javascript:closeDiv()" >Закрыть</a>
</div>
<div id="bg" style="display:none;z-index:100;"></div>
<br/><br/><br/><br/><br/><br/><br/>
<a href="javascript:showDiv('popDiv')" style="font-size:20px;margin-left:100px">Показать</a>
</ТЕЛО>
</HTML>