CSS+JavaScript
Принцип реализации:
Создайте полноэкранный DIV, используя абсолютное позиционирование, чтобы его можно было отделить от потока документов, не затрагивая другие элементы и установите его на полупрозрачное состояние. Конечно, эта прозрачность может быть скорректирована по желанию и создать элемент входа в систему, который также использует абсолютное позиционирование и делает его значение Z-индексного атрибута больше, чем DIV на экране, и в настоящее время оно не будет покрыто полноэкрашенным DIV. В состоянии по умолчанию значение атрибута отображения этих двух DOV не является. Нажав соответствующую кнопку, они могут изменить значение своего атрибута отображения.
<! Doctype html> <html> <head> <meta charset = "utf-8"> <meta name = "Автор" content = "// www.vevb.com/"/> <title> Как вспять полноэкранную серо-черную пропущенную маску Effect-wulin.com </title> <style type = "css"> * * {margp wulin.com </title> <стиль = "css"> * * Заполнение: 0px; } .zhezhao {ширина: 100%; высота: 100%; фоновый цвет:#000; Фильтр: альфа (непрозрачность = 50); -Моз-мобилизация: 0,5; непрозрачность: 0,5; позиция: абсолютно; слева: 0px; Верх: 0px; дисплей: нет; Z-Index: 1000; } .login {width: 280px; Высота: 180px; позиция: абсолютно; Верх: 200px; Слева: 50%; фоновый цвет:#000; Мяглевая маржа: -140PX; дисплей: нет; Z-Index: 1500; } .content {margin-top: 50px; Цвет: красный; высота линии: 200px; Высота: 200px; Текст-альбом: Центр; } </style> <script type = "text/javascript"> window.onload = function () {var zhezhao = document.getElementById ("Zhezhao"); var login = document.getElementById ("login"); var bt = document.getElementbyId ("bt"); var btclose = document.getElementbyId ("btclose"); bt.onclick = function () {zhezhao.style.display = "block"; login.style.display = "block"; } btclose.onclick = function () {zhezhao.style.display = "none"; login.style.display = "none"; }} </script> </head> <body> <div id = "zhezhao"> </div> <div id = "login"> <button id = "btclose"> Нажмите, чтобы закрыть </button> </div> <div> wulin.com приветствует вас, <button id = "bt"> нажмите, чтобы всплыть в Mask </button> </div> </ht -hody>Вышеуказанное реализует основную функцию маски. Нажав, чтобы вспять маску, появится объект. Нажав, чтобы закрыть, эффект маски исчезнет.
Чистый JavaScript:
Эффект реализации: когда окно появляется, страница за окном становится темной и не может работать.
Сложность: Поскольку слой div не может покрыть элемент управления SELECT, есть два специальных метода: один из них должен добавить iframe под всплывающим окном, чтобы покрыть Select; Второе-скрыть элемент управления Select во время всплывающего окна, и выберите второй метод здесь.
Принцип реализации: добавьте полупрозрачный слой на странице и середину всплывающего окна, чтобы перезаписать содержание страницы.
Код:
<script language = "javascript"> function open () {// скрыть Select Control DisplaySelect (0); // показать маску слой документ. GetElementById ("divPageMask"). Style.display = "block"; // Обучение слоя маски ResizeMask (); window.onresize = resizemask; // Показать всплывающий документ.getElementById ("Divopenwin"). Style.display = "block"; } function close () {// показать Select Control DisplaySelect (1); // Обработка маски слой divpagemask.style.width = "0px"; divpagemask.style.height = "0px"; divopenwin.style.display = "нет"; window.onresize = null; document.getElementbyId ("divopenwin"). style.display = "none"; } // Функция маски страницы resizemask () {divpagemask.style.width = document.body.scrollwidth; divpagemask.style.height = document.body.scrollheight; divopenwin.style.left = ((document.body.offsetwidth - divopenwin.offsetwidth) / 2); divopenwin.style.top = ((document.body.offsetheight - divopenwin.offsetheight) / 2); } функция DisplaySelect (val) {// Показать и скрыть и скрыть Select Control VAR DisplayType; var arrdispalytype = ["hidden", "visible"]; var arroobjselect = document.getElementsbytagname ("select"); for (i = 0; i <arrorbjselect.length; i ++) {arroobjselect [i] .style.visibility = arrdispalytype [val]; }} </script> <style type = "text/css"> .body, td {font-size: 12px} #divpagemask {foangy-color: white; Фильтр: альфа (непрозрачность = 50); слева: 0px; положение: абсолют; верх: 0px;} #divopenwin {foangy-color: #eeeeee; позиция: абсолют; слева: 0px; top: 0px; display: none; z-index: 50; Ширина: 300px; высота: 150px} </style> <div id = "divpagemask"> </div> <div id = "divopenwin"> <center> <a href = "javascript: close ();"> close </a> </centre> </div> <babel> </label> <center> <tablepadding = "0 Cellycode =" 0 ". <tr> <td colspan = "2" align = "center"> <p> <img src = "http://www.sopul.com/images/index/logo.gif"> </p> <p> </p> <p> </p> </td> </tr> <tr> <td style = "color:#666666; размер Font: 13px"> </td> </tr> </tbody> </table> <table bgcolor = "#e1e1e1" cellPadding = "0" CellPacing = "1"> <Tbody> <tr> <td align = "center" bgcolor = "#f9f9f9"> <tlecesing = witch = witched = "#f9f9"> <tlecesing = warge = "#tailscing ="#tailscing = "#tailsing ="#tailsceping = ". cellPadding = 0 width = 600 style = "margin-top: 20px"> <form name = "f" action = "http://www.sopull.com/shoplist.asp"> <tbody> <ttr> <td> Ключевые слова: </td> <td> <input type = "name =" k "size = 30/> </td> <td> <dlid> </td> </td> </td> </td> </td> </td> </td> </td> <td> <td> Ширина = 101> Местоположение: </td> <td align = средняя ширина = 97 id = "cn"> <script language = "javascript" src = "http://www.sopull.com/inc/js/listcity.asp?cityname=beijing"> </script> </td> <td align = 95 width = 95 aligth = 95. type = отправить значение = "Search Shop"> </td> </tr> </form> <tr> <td> </td> <td colspan = "4" valign = "middle"> Например: ресторан; технические приборы; Supermarket </table> </td> </tr> </tbode> </table> </table> </table> </table> </center> <p align = "center"> </p> <p align = "center"> <a href = "javascript: open ()"> open Mask </a> </p> <p align = "centre"> </pry ilign = </pright "</pright" </pright "</pright" </pright "</pright" </pright "</preign" cellPadding = "0" cellPacing = "0"> <Tbody> <!-<tr> <td align = "center" founal = "images/index/line_2.gif"> <img src = "Images/index/line_2.gif"> </td> </tr>-> <tr> <td align = "> <a href ="##"##"#"#" Color = "#ff6600"> Промоушена магазина </a> | <a href = "#"> о магазине </a> | <a class = b href = "#" target = _blank> Бизнес -сотрудничество </a> | <a onclick = "this.style.behavior = 'url (#default#homepage)'; this.sethomepage ('http://www.sopull.com'); вернуть false;" href = "http://www.sopull.com/#"> Установка в качестве домашней страницы </a> | <a onclick = "javaScript: window.external.addfavorite ('http://www.sopull.com/' ,''soupu.com-china's Самая великая поисковая система хранилища')" href = "http://www.sopull.com/#"> Добавить в фирменные Soupu.com Guangdong ICP № 07006767 </td> </tr> </tbody> </table>