Эффект полупрозрачного слоя маски в основном достигается с помощью плагинов. Позвольте мне поделиться с вами с вами использованием Native JS для достижения полупрозрачного эффекта маски. Заинтересованные друзья могут ссылаться на это. Я надеюсь, что вам будет полезно быть знакомым с Native JS.
<div> <h4> <pan> Зарегистрируется сейчас </span> <pran> close </span> </h4> <p> <pabel> username </label> <input type = "text" onmouseover = "this.style.border = '1px solid #f60'" onfoucs = "this.Style.bordder = '1px solid #f60'" onblur = "this.style.border = '1px solid #ccc'"/> </p> <p> <pabel> пароль </label> <input type = "password" onmouseover = "this.style.border = '1px solid #f60'" onfoucs = "this.style.bordder = '1px solid #f60'" onblur = "this.style.border = '1px solid #ccc'"/> </p> <p> <input type = "propect" value = "regist"/> <input Type = "reset" value = "Reset"/> </p> </div> <div> </div> <!-Mask Layer div-> <script type = "javascript"> javascript "> javascript"> javascript "> javascript" document.getElementbyId ("оповещение"); var mymask = document.getElementbyId ('маска'); var reg = document.getElementbyId ("content"). getElementsbytagname ("a") [0]; var mclose = document.getElementbyId ("close"); reg.onclick = function () {mymask.style.display = "block"; myalert.style.display = "block"; myalert.style.position = "Absolute"; myalert.style.top = "50%"; myalert.style.left = "50%"; myalert.style.margintop = "-75px"; myalert.style.marginleft = "-150px"; document.body.style.overflow = "hidden"; } mclose.onclick = function () {myalert.style.display = "none"; mymask.style.display = "none"; } </script> </body> </html>Полная крышка
<! Doctype html> <style> #mask {позиция: фиксированная; ширина: 100%; Верх: 0px; слева: 0px; _position: абсолютно; _top: Expression (documentElement.scrolltop); Предпосылки: RGBA (0,0,0,0,5); Фон: прозрачный/9; Фильтр: Progid: dximagetransform.microsoft.gradient (startColorStr =#80000000, EndColorStr =#80000000); Дисплей: None;}#mask_td {text-align: center;} </style> <img src = "http://web-tinker.com/images/themagicconch.jpg" id = "img"/> <table id = "mask"> <Td> <Td ID = "mask_td"/> </td> </tript> </tript> </tript> </tript> </tript> </tript> <pript> <dript> <tr> <tr> <tr> <td> <Td ID = " Браузер var isie = navigator.useragent.match (/msie (/d)/i); isie = isie? Isie [1]: isie; // объявить переменную var img, mask; // получить элемент img = document.getElementbyId ("img"); mask = document.getElementById ("mask"); mask.td = document.getElementById ("mask_td"); // Рассчитайте размер маски. mask.style.width = de.clientwidth+"px" mask.style.height = de.clientHeight+"px" mask.style.height = de.clientHeight+"px";}; // Добавить метод показания. ] .style.overflow = "hidden"; // Рассчитайте размер маски маски. SetSize (); // show mask.style.display = isie == 6? "Block": "таблица";}; // Добавить Mide Method Mask.hide = function () {// Показать документ Scrollbar Page [isie <9? // очистить содержание внутри Mask.td.innerhtml = ""; // скрыть mask.style.display = "none";}; // Добавить метод приложения mask.append = function (e) {// Добавить контент в маске td, you mask.td.appendchild (e);}; // щелкнуть маску, чтобы закрыть Mask.onclick = function (e) {// Оценить источник события, если в области заблокированная область, нажатая Mask mask e | (e.target || e.srcelement) == mask.td && mask.hide ();}; // Добавить размер маски, когда размер формы изменяет window.onresize = function () {mask.setize ();}; // Нажмите на событие изображения img.onclick = function () {) {// Создание объекта Image var var ar var var; // Установить адрес изображения o.src = img.src; // Добавить контент mask.append (o); // Показать mask mask.show ();}; </script>