这几款点击按钮弹出图层后背景变灰特效很实用，图层弹出变灰后网页无法操作，该图层弹出特效兼容当前主流浏览器。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html;charset=gb2312">
<meta name="keywords" content="武鸣人网站,武鸣信息网,武鸣本地网,武鸣信息资源平台,减肥,健身,励志,励志语录,js特效,网页特效,www.wuming.ren">
<meta name="description" content="欢迎来到武鸣人信息资源平台，各种信息免费发布，资源共享合作共赢，分享互联网流行的励志语录经典短句，减肥健身健康小常识及打卡记录，收集各种js特效代码。">
<title>几款实用的网页弹出图层背景变灰特效_武鸣人</title>
<style type="text/css">
body {
background: #FFFFFF;
color: #333333;
font-size: 12px;
}
input {
font-size: 12px;
}
/* 提醒信息” */
/* ---------- begin ---------- */
.title {
height: 30px;
margin: 0px auto;
width: 950px;
}
.title .item, .title .itemA, .title .itemH {
background: url(/img/20240409_www_wuming_ren_2.jpg) no-repeat;
color: #000099;
cursor: pointer;
float: left;
font-size: 14px;
height: 29px;
width: 102px;
text-align: center;
line-height: 28px;
border: 1px solid #A4CEEC;
border-bottom: none;
}
.title .item {
background-position: 0px -1px;
}
.title .itemH {
background-position: 0px -30px;
}
.title .itemA {
background-position: 0px -59px;
border-color: #73C5FF;
color: #333333;
cursor: auto;
font-weight: bold;
height: 29px;
}
.title .space {
border-bottom: 1px solid #73C5FF;
float: left;
height: 29px;
width: 1px;
}
/* ---------- end ---------- */
/* Popup */
/* ---------- begin ---------- */
.popup {
position: absolute;
width: 489px;
}
.popup .shadow {
background: #999999;
width: 486px;
height: 192px;
position: absolute;
left: 3px;
top: 3px;
filter: alpha(opacity=60);
-moz-opacity: 0.6;
opacity: 0.6;
}
.popup .main {
border: 1px solid #74C4FF;
height: 190px;
position: absolute;
width: 484px;
}
.popup .main .head {
background: #FFFFFF url(/img/20240409_www_wuming_ren_2.jpg) repeat-x 0px -197px;
border-bottom: 1px solid #74C4FF;
height: 25px;
width: 484px;
}
.popup .main .head .titleAlert, .popup .main .head .titleConfirm, .popup .main .head .titlePrompt {
background: url(/img/20240409_www_wuming_ren_2.jpg) no-repeat;
float: left;
height: 25px;
width: 100px;
}
.popup .main .head .titleAlert {
background-position: 0px -371px;
}
.popup .main .head .titleConfirm {
background-position: 0px -396px;
}
.popup .main .head .titlePrompt {
background-position: 0px -421px;
}
.popup .main .head .tail, .popup .main .head .tailH {
background: url(/img/20240409_www_wuming_ren_2.jpg) no-repeat;
float: right;
height: 25px;
width: 41px;
}
.popup .main .head .tail {
background-position: -60px -284px;
}
.popup .main .head .tailH {
background-position: -101px -284px;
}
.popup .main .head .tail .closeIcon, .popup .main .head .tailH .closeIcon {
background: url(/img/20240409_www_wuming_ren_2.jpg) no-repeat;
display: inline;
float: right;
font-size: 0px;
height: 18px;
margin: 3px 4px 0px 0px;
width: 19px;
cursor: pointer;
}
.popup .main .head .tail .closeIcon {
background-position: -142px -284px;
}
.popup .main .head .tailH .closeIcon {
background-position: -161px -284px;
}
.popup .main .body {
background: #FFFFFF;
height: 164px;
width: 484px;
}
.popup .main .body .iconError, .popup .main .body .iconWarning, .popup .main .body .iconEditing, .popup .main .body .iconSuccess {
background: url(/img/20240409_www_wuming_ren_2.jpg) no-repeat;
display: inline;
float: left;
height: 62px;
width: 60px;
margin: 30px 40px;
}
.popup .main .body .iconError {
background-position: -0px -222px;
}
.popup .main .body .iconWarning {
background-position: -60px -222px;
}
.popup .main .body .iconEditing {
background-position: -120px -222px;
}
.popup .main .body .iconSuccess {
background-position: 0px -284px;
}
.popup .main .body .element {
clear: right;
display: inline;
float: left;
height: 100px;
margin: 10px 0px;
width: 305px;
}
.popup .main .body .element .elementEntity {
height: 100px;
vertical-align: middle;
}
.popup .main .body .element .elementEntity .title {
font-size: 14px;
width: 100%;
}
.popup .main .body .element .elementEntity label {
font-weight: bold;
}
.popup .main .body .element .elementEntity span {
color: #FF0000;
}
.popup .main .body .element .elementEntity .input {
margin: 5px 0px;
border: 1px solid #A5ACB2;
font-size: 12px;
height: 14px;
padding: 2px;
width: 200px;
}
.popup .main .body .buttons {
text-align: center;
clear: both;
}
.popup .main .body .buttons .button {
display: inline;
height: 25px;
margin: 5px 10px;
width: 80px;
}
/* ---------- end ---------- */
/* 其他 */
/* ---------- begin ---------- */
.mask {
filter: alpha(opacity=70);
opacity: 0.7;
background: #FFFFFF;
position: absolute;
left: 0px;
top: 0px;
}
</style>
<script language="javascript">
function getElement(id) {
return document.getElementById(id);
}//武鸣人网站https://www.wuming.ren 网站很好记住，wuming.ren(武鸣拼音.ren域名后缀)
function createElement(type) {
return document.createElement(type);
}
function removeElement(element) {
try {
if (element) {
element.parentNode.removeChild(element);
}
}
catch (e) {
}
}//武鸣人网站https://www.wuming.ren 网站很好记住，wuming.ren(武鸣拼音.ren域名后缀)
function hideElement(element) {
if (element) {
element.style.display = "none";
}
}//武鸣人网站https://www.wuming.ren 网站很好记住，wuming.ren(武鸣拼音.ren域名后缀)
function hideElementV(element) {
if (element) {
element.style.visibility = "hidden";
element.style.display = "";
}
}//武鸣人网站https://www.wuming.ren 网站很好记住，wuming.ren(武鸣拼音.ren域名后缀)
function showElement(element) {
if (element) {
element.style.display = "";
element.style.visibility = "";
}
}
function clearElement(element) {
for (var i in element) {
try {
element[i] = null;
}
catch (e) {
continue;
}
}
}//武鸣人网站https://www.wuming.ren 网站很好记住，wuming.ren(武鸣拼音.ren域名后缀)
function convertHTML(value) {
if (!value) {
return "";
}
return value.toString().split("<").join("<").split(">").join(">").split(" ").join(" ").split("&").join("&").split("<").join("<").split(">").join(">").split(" ").join(" ");
}//武鸣人网站https://www.wuming.ren 网站很好记住，wuming.ren(武鸣拼音.ren域名后缀)
function GetOffsetPos(element) {
var flag = element.tagName.toUpperCase() == "INPUT" ? true : false;
var posTop = 0, posLeft = 0;
do {
posTop += element.offsetTop || 0;
posLeft += element.offsetLeft || 0;
element = element.offsetParent;
} while (element);
if (navigator.appVersion.indexOf("MSIE 6.0") != -1 && flag) {
posLeft++;
}
return [posLeft, posTop];
}//武鸣人网站https://www.wuming.ren 网站很好记住，wuming.ren(武鸣拼音.ren域名后缀)
function getWindowSize() {
var myWidth = 0, myHeight = 0;
if( typeof( window.innerWidth ) == 'number' ) {
//Non-IE
myWidth = window.innerWidth;
myHeight = window.innerHeight;
} else if( document.documentElement && ( document.documentElement.clientWidth || document.documentElement.clientHeight ) ) {
//IE 6+ in 'standards compliant mode'
myWidth = document.documentElement.clientWidth;
myHeight = document.documentElement.clientHeight;
} else if( document.body && ( document.body.clientWidth || document.body.clientHeight ) ) {
//IE 4 compatible
myWidth = document.body.clientWidth;
myHeight = document.body.clientHeight;
}
return([myWidth,myHeight]);
}//武鸣人网站https://www.wuming.ren 网站很好记住，wuming.ren(武鸣拼音.ren域名后缀)
function hideSelects(zIndexNow) {
if (navigator.appVersion.indexOf("MSIE 6.0") != -1) {
var selects = document.getElementsByTagName("select");
var length = selects.length;
for (var i = 0; i < length; i++) {
if (selects[i].zIndexNow != zIndexNow && selects[i].style.visibility != "hidden") {
selects[i].style.visibility = "hidden";
selects[i].zIndexNow = zIndexNow;
}
}
}
}//武鸣人网站https://www.wuming.ren 网站很好记住，wuming.ren(武鸣拼音.ren域名后缀)
function showSelects(zIndexNow) {
if (navigator.appVersion.indexOf("MSIE 6.0") != -1) {
var selects = document.getElementsByTagName("select");
var length = selects.length;
for (var i = 0; i < length; i++) {
if (selects[i].zIndexNow == zIndexNow) {
selects[i].style.visibility = "";
selects[i].zIndexNow = -1;
}
}
}
}
var Mask = function () {
this.zIndexNow = 100;
this.maskDiv = null;
this.indexArr = [];
this.show = function () {
this.zIndexNow += 10;
if (this.indexArr.length == 0){
var maskHeight = document.documentElement.scrollHeight > getWindowSize()[1] ? document.documentElement.scrollHeight : getWindowSize()[1];
this.maskDiv = createElement("div");
this.maskDiv.onclick = function () {
var event = arguments[0] || window.event;
event.cancelBubble = true;
};
this.maskDiv.className = "mask";
this.maskDiv.style.width = "100%";
this.maskDiv.style.height = maskHeight + "px";
document.body.appendChild(this.maskDiv);
}
this.maskDiv.style.zIndex = this.zIndexNow - 1;
this.indexArr.push(this.zIndexNow - 1);
hideSelects(this.zIndexNow);
};
this.clean = function () {
showSelects(this.zIndexNow);
this.indexArr.pop();
if (this.indexArr.length > 0){
this.maskDiv.style.zIndex = this.indexArr[this.indexArr.length - 1];
this.zIndexNow = this.indexArr[this.indexArr.length - 1] + 1;
}
else {
document.body.removeChild(this.maskDiv);
this.zIndexNow = 100;
}
};
};//武鸣人网站https://www.wuming.ren 网站很好记住，wuming.ren(武鸣拼音.ren域名后缀)
var DragAble = function (dragable,handler) {
this.iDiffX = 0;
this.iDiffY = 0;
this.oDragable = dragable;
this.oHandler = handler;
this.mouseDown = function(){
document.body.onselectstart = function () {return false;};
document.body.style.userSelect = "none";
document.body.style.MozUserSelect = "none";
var object = arguments.callee.object;
var event = arguments[0] || window.event;
object.iDiffX = event.clientX - object.oDragable.offsetLeft;
object.iDiffY = event.clientY - object.oDragable.offsetTop;
document.body.onmousemove = object.mouseMove;
document.body.onmouseup = object.mouseUp;
object.oHandler.style.cursor = "move";
};
this.mouseDown.object = this;
this.oHandler.onmousedown = this.mouseDown;
this.mouseMove = function() {
var object = arguments.callee.object;
var event = arguments[0] || window.event;
var wWidth = getWindowSize()[0];
if ((event.clientX - object.iDiffX) >= 0 && (event.clientX - object.iDiffX + object.oDragable.clientWidth) <= wWidth - 20){
object.oDragable.style.left = event.clientX - object.iDiffX + "px";
}
else {
if ((event.clientX - object.iDiffX) < 0){
object.oDragable.style.left = 0 + "px";
}
else {
object.oDragable.style.left = wWidth - object.oDragable.clientWidth - 20 + "px";
}
}
//obj.style.left = tempLeft + "px";
if ((event.clientY - object.iDiffY) >= 0){
object.oDragable.style.top = event.clientY - object.iDiffY + "px";
}
else {
object.oDragable.style.top = 0 + "px";
}
};
this.mouseMove.object = this;
this.mouseUp = function() {
var object = arguments.callee.object;
document.body.onselectstart = "";
document.body.style.userSelect = "";
document.body.style.MozUserSelect = "";
document.body.onmousemove = "";
document.body.onmouseup = "";
object.oHandler.style.cursor = "";
};
this.mouseUp.object = this;
};//武鸣人网站https://www.wuming.ren 网站很好记住，wuming.ren(武鸣拼音.ren域名后缀)
var Popups = function (stringContainerId) {
this.containerElement = getElement(stringContainerId);
this.containerElement.onclick = function (){
var event = arguments[0] || window.event;
event.cancelBubble = true;
};
this.bindElement = function (stringTagName, stringClassName, objectContainerElement, objectContainer) {
var element = createElement(stringTagName);
element.className = stringClassName;
if (objectContainerElement) {
objectContainerElement.appendChild(element);
}
if (objectContainer){
element.container = objectContainer;
}
return element;
};
this.initializeElement = function (stringTitleIconClassName, stringIconClassName, booleanButtons, functionCallback) {
var container = this.bindElement("div", "popup");
container.bindElement = this.bindElement;
var shadow = this.bindElement("div", "shadow", container, container);
var main = this.bindElement("div", "main", container, container);
var head = this.bindElement("div", "head", main, container);
container.head = head;
var titleIcon = this.bindElement("div", stringTitleIconClassName, head, container);
container.titleIcon = titleIcon;
var tail = this.bindElement("div", "tail", head, container);
var closeIcon = this.bindElement("div", "closeIcon", tail, container);
closeIcon.backgroundElement = tail;
closeIcon.onmouseover = function () {
this.backgroundElement.className = "tailH";
};
closeIcon.onmouseout = function () {
this.backgroundElement.className = "tail";
};
closeIcon.onclick = function () {
this.container.remove();
};
var body = this.bindElement("div", "body", main, container);
container.body=body;
var icon = this.bindElement("div", stringIconClassName, body, container);
container.icon = icon;
var element = this.bindElement("div", "element", body, container);
var elementTable = createElement("table");
elementTableTrTd = elementTable.insertRow(0).insertCell(0);
elementTableTrTd.className = "elementEntity";
element.appendChild(elementTable);
container.element = elementTableTrTd;
var buttons = this.bindElement("div", "buttons", body, container);
container.buttons = buttons;
var buttonOk = this.bindElement("input", "button");
buttonOk.type = "button";
buttonOk.value = "确定";
buttonOk.container = container;
buttonOk.onclick = function () {
if (this.container.input) {
if (this.container.input.value == "") {
popups.createPopup("AlertError", "输入不能为空！").show();
this.container.input.focus;
}
else {
functionCallback(this.container.input.value);
this.container.remove();
}
}
else {
functionCallback(this.container);
this.container.remove();
}
};
container.buttonOk = buttonOk;
buttons.appendChild(buttonOk);
if (booleanButtons) {
var buttonCancel = this.bindElement("input", "button");
buttonCancel.type = "button";
buttonCancel.value = "取消";
buttonCancel.container = container;
buttonCancel.onclick = function () {
this.container.remove();
};
container.buttonCancel = buttonCancel;
buttons.appendChild(buttonCancel);
}
this.containerElement.appendChild(container);
hideElement(container);
container.show = function () {
this.style.left = (getWindowSize()[0] - 489) / 2 + document.documentElement.scrollLeft + "px";
this.style.top = (getWindowSize()[1] - 192) / 2 + document.documentElement.scrollTop + "px";
mask.show();
this.style.zIndex = mask.zIndexNow;
showElement(this);
var dragAble = new DragAble(this, this.head);
if (this.input) {
var setTimeoutFocus = function () {
arguments.callee.input.select();
};
setTimeoutFocus.input = this.input;
setTimeout(setTimeoutFocus, 1);
}
else {
this.buttonOk.focus();
}
};
container.remove = function () {
mask.clean();
removeElement(this);
};
container.hide = function () {
hideElement(this);
};
return container;
};
this.createPopup = function (stringType, stringNote, functionCallback) {
switch (stringType) {
case "AlertError":
var popup = this.initializeElement("titleAlert", "iconWarning", false, new Function());
popup.element.innerHTML = '<div class="title">' + stringNote + '</div>';
return popup;
break;
case "AlertSuccess":
var popup = this.initializeElement("titleAlert", "iconSuccess", false, new Function());
popup.element.innerHTML = '<div class="title">' + stringNote + '</div>';
return popup;
break;
case "Confirm":
var popup = this.initializeElement("titleConfirm", "iconEditing", true, functionCallback);
var line = createElement("div");
line.innerHTML = '<div class="title">' + stringNote + '<br /><div>';
popup.element.appendChild(line);
return popup;
break;
case "Prompt":
var combination = stringNote;
functionCallback.combination = combination;
var popup = this.initializeElement("titlePrompt", "iconEditing", true, functionCallback);
var line = createElement("div");
var arrayNote = stringNote;
line.innerHTML = '<div class="title">请输入武鸣人<label>' + '</label>:<div>';
var input = createElement("input");
input.type = "text";
input.className = "input";
popup.input = input;
input.container = popup;
input.onkeydown = function () {
var event = arguments[0] || window.event;
switch (event.keyCode) {
case 13: //Enter
this.container.buttonOk.click();
break;
case 27: //Escape
this.container.remove();
break;
default:
break;
}
};
line.appendChild(input);
popup.element.appendChild(line);
return popup;
break;
}
};
};
</script>
</head>
<body>
<a href="https://www.wuming.ren">武鸣人</a>，各种信息资源免费发布，分享励志语录经典短句，减肥健身常识，各种js特效代码。网站很好记住，wuming.ren(武鸣拼音.ren域名后缀)<hr>
<!--欢迎来到武鸣人信息资源平台，各种信息免费发布，资源共享合作共赢，分享互联网流行的励志语录经典短句，减肥健身健康小常识及打卡记录，收集各种js特效代码。-->
<script type="text/javascript" src="https://www.wuming.ren/ad/tc.js"></script>
<script type="text/javascript" src="https://www.wuming.ren/ad/a.js"></script>
<input type="button" value="弹出窗口" onclick="ShowPop('Prompt')">
<input type="button" value="提示错误" onclick="ShowPop('AlertError')">
<input type="button" value="成功提示" onclick="ShowPop('AlertSuccess')">
<input type="button" value="提示确认" onclick="ShowPop('Confirm')">
<div id="popupContainer"></div>
<script type="text/javascript">
<!--
mask=new Mask();
popups=new Popups("popupContainer");
function ShowPop(showType)
{
mask=new Mask();//这两行挪到里面来
popups=new Popups("popupContainer");
popups.createPopup(showType,showType,CallBack).show();
}//武鸣人网站https://www.wuming.ren 网站很好记住，wuming.ren(武鸣拼音.ren域名后缀)
function CallBack()
{
alert("武鸣人！");
}//武鸣人网站https://www.wuming.ren 网站很好记住，wuming.ren(武鸣拼音.ren域名后缀)
//-->
</script>
</body>
</html>本文来自武鸣人网站，转载请注明出处