Эта глава представляет, как нажать кнопку, чтобы вспять центрированное окно, и это окно имеет полупрозрачный эффект маскирующих слоев. И.
Код заключается в следующем:
Кода -копия выглядит следующим образом:
<! Doctype html>
<html>
<голова>
<meta charset = "utf-8">
<meta name = "Author" Content = "http://www.softwhy.com/"/>
<Title> Ant Tribe </title>
<стиль типа = "text/css">
#тускнеть {
дисплей: нет;
позиция: абсолютно;
Верх: 0%;
слева: 0%;
Ширина: 100%;
высота: 100%;
фоновый цвет: черный;
Z-Index: 1001;
-Моз-мобилизация: 0,8;
непрозрачность: .80;
Фильтр: альфа (непрозрачность = 80);
}
#свет{
дисплей: нет;
позиция: абсолютно;
Верх: 25%;
Слева: 25%;
Ширина: 50%;
высота: 50%;
Заполнение: 16px;
Граница: 3PX Solid Orange;
фоновый цвет: белый;
Z-Index: 1002;
переполнение: авто;
}
</style>
<script type = "text/javascript">
window.onload = function () {
var linkbt = document.getElementbyId ("linkbt");
var light = document.getElementbyId ('light');
var fade = document.getElementbyId ('fade');
var closebt = document.getElementById ("closeBt");
linkbt.onclick = function () {
light.style.display = 'block';
fade.style.display = 'block';
}
closebt.onclick = function () {
light.style.display = 'none';
fade.style.display = 'none';
}
}
</script>
</head>
<тело>
<a href = "javascript: void (0)" id = "linkbt"> нажмите здесь, чтобы открыть окно </a>
<div id = "light"> <a href = "javaScript: void (0)" id = "closebt"> окно закрытия </a> </div>
<div id = "fade" "> </div>
</body>
</html>
Приведенный выше код реализует наши требования, и следующее кратко вводит процесс реализации.
1. Принцип реализации:
По умолчанию слой и окно маски скрыты и невидимы. Оба элемента используют абсолютное позиционирование и устанавливают значение атрибута Z-индекс в центре окна, чтобы быть больше слоя маски, чтобы его можно было покрыть на слое маски. Когда кнопка «Закрыть» нажимается, слой и окно маски могут быть спрятаны, а принцип примерно такой же.