我想做的是在按下按钮并禁用背景时将 div 显示为弹出窗口。
我的弹出窗口运行良好，但当我尝试禁用背景时出现问题。为此，我使用了名为“mask”的 div，它必须占据整个 body 。这个 div 必须在开始时隐藏，并在有人按下按钮时显示它。
问题是这个 div(掩码)从一开始就一直显示。
我一直在尝试在互联网上寻找解决方案，除此之外，我发现了以下链接: CSS Disable background when div popup和 disable background using css when popup appear
第一个没有解决方案，第二个的解决方案也没有解决我的问题。
这是我的 .jsp 文件:
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<link href="css/styles.css" rel="stylesheet" type="text/css">
<link href="css/popup.css" rel="stylesheet" type="text/css">
<script src="js/jquery-2.1.0.js" type="text/javascript"></script>
<script language="javascript" type="text/javascript" src="js/popup.js"></script>
</head>
<body>
<div id="pop">
<div id="close">X</div>
<div id="contentPop"></div>
</div>
<div id="mask">
<div id="page-wrap">
...
<a class="minibtn" onclick="show();">Show pop-up</a>
...
</div>
</div>
</body>
</html>
我省略了所有与弹出窗口无关的代码，并将其替换为“...”。
popup.css 文件:
#mask{
z-index: 500;
position: fixed;
display: none; /* removes the element completely from the document, it doesn't take up any space. */
/* visibility: hidden; -- hides the element, but it still takes up space in the layout. */
background: transparent;
background-color: #ccc;
height: 100%;
width: 100%;
top: 0px;
left: 0px;
}
#pop {
z-index:2;
position:absolute;
border: 1px solid #333333;
text-align:center;
background:#ffffff;
}
#close {
float:right;
margin-right:5px;
cursor:pointer;
font:Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
font-weight:bold;
color:#FFFFFF;
background-color:#666666;
width:12px;
position:relative;
margin-top:-1px;
text-align:center;
}
和 popup.js 文件:
function show() {
// Show pop-up and disable background using #mask
$("#pop").fadeIn('slow');
$("#mask").fadeIn('slow');
// Load content.
$.post("contentPopup.html", function(data) {
$("#contentPop").html(data);
});
}
$(document).ready(function() {
// Hide pop-up and mask
$("#mask").hide();
$("#pop").hide();
// Size pop-up
var img_w = 600;
var img_h = 300;
// width and height in css.
$("#pop").css('width', img_w + 'px');
$("#pop").css('height', img_h + 'px');
// Get values from the browser window
var w = $(this).width();
var h = $(this).height();
// Centers the popup
w = (w / 2) - (img_w / 2);
h = (h / 2) - (img_h / 2);
$("#pop").css("left", w + "px");
$("#pop").css("top", h + "px");
// Function to close the pop-up
$("#close").click(function() {
$("#pop").fadeOut('slow');
$("#mask").fadeOut('slow');
});
});
非常感谢您的宝贵时间和帮助。如果有任何疑问，请告诉我，我会尝试以更好的方式进行解释。
最佳答案
有两个错误。您在没有显示的“mask”div 中使用了“Show popup”。第二个关闭图标你给了“z-index:2”，这应该大于掩码 z-index 以显示在掩码之上
<pre>
$(document).ready(function() {
$('.minibtn').click(function() {
// Show pop-up and disable background using #mask
$("#pop").fadeIn('slow');
$("#mask").fadeIn('slow');
// Load content.
$.post("contentPopup.html", function(data) {
$("#contentPop").html(data);
});
});
// Hide pop-up and mask
$("#mask").hide();
$("#pop").hide();
// Size pop-up
var img_w = 600;
var img_h = 300;
// width and height in css.
$("#pop").css('width', img_w + 'px');
$("#pop").css('height', img_h + 'px');
// Get values ??from the browser window
var w = $(this).width();
var h = $(this).height();
// Centers the popup
w = (w / 2) - (img_w / 2);
h = (h / 2) - (img_h / 2);
$("#pop").css("left", w + "px");
$("#pop").css("top", h + "px");
// Function to close the pop-up
$("#close").click(function() {
$("#pop").fadeOut('slow');
$("#mask").fadeOut('slow');
});
});
</pre>
关于jquery - div弹出时禁用背景，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/23267119/