Можно сказать, что после того, как я понял предыдущую «змею», эта функция действительно намного менее сложна, чем я себе представлял. Конечно, этот метод подозревается в том, что он хитрый, и в конечном итоге функция была реализована. Давайте проанализируем и организуем это.
1. Принцип реализации
Принцип реализации этой статьи заключается в следующем:
* На самом деле, слой всплывающего окна, слой маски и оригинальный дисплей страницы-три разных DOV соответственно
* Уровень всплывающего уровня находится над слоем маски, а уровень слоя маски выше исходного дисплея страницы;
* Слой маски имеет четкий эффект
* Слой маски не имеет практического значения, поэтому его не нужно писать на HTML -части. Конечно, это также может быть реализовано после написания.
2. Реализация кода
Язык HTML выглядит следующим образом:
Кода -копия выглядит следующим образом:
<html>
....
<тело>
<Центр>
<div> <input type = "button" value = "go" onclick = "show ()"> </div>
<div id = "alert" style = "display: none;">
<форма>
Авторизоваться
<input type = "text"> <input type = "password"> <input type = "opper" value = "login">
</form>
</div>
</center>
</body>
</html>
JavaScript реализует слой всплывающего окна и слой маски:
Кода -копия выглядит следующим образом:
<span style = "font-size: 12px;"> function show () {
var alertpart = document.getElementById ("оповещение");
alertpart.style.display = "block";
alertpart.style.position = "Absolute";
alertpart.style.top = "50%";
alertpart.style.left = "50%";
alertpart.style.margintop = "-75px";
alertpart.style.marginleft = "-150px";
alertpart.style.background = "cyan";
alertpart.style.width = "300px";
alertpart.style.height = "200px";
alertpart.style.zindex = "501";
var mybg = document.createElement ("div");
mybg.setattribute ("id", "mybg");
mybg.style.background = "#000";
mybg.style.width = "100%";
mybg.style.height = "100%";
mybg.style.position = "Absolute";
mybg.style.top = "0";
mybg.style.left = "0";
mybg.style.zindex = "500";
mybg.style.opacity = "0,3";
mybg.style.filter = "alpha (непрозрачность = 30)";
document.body.appendchild (mybg);
document.body.style.overflow = "hidden";
}
</script> </span>
Здесь мы используем z-индекс для различения иерархий, непрозрачности и фильтра: альфа (непрозрачность =), документ. CreateElement («Div») и Document.Body.appendChild (), все они используются ранее, чтобы мы могли их достичь. На самом деле, когда принцип понимается, все будет намного проще.
Дорога длинная и трудная