blackoverlay 效果不适用于整个背景。
<html>
<head>
<style>
.black_overlay{display:none;position:absolute;top:0%;left:0%;width:100%;height:100%;background-color:black;z-index:1001;-moz-opacity:0.6;opacity:.60;filter:alpha(opacity=60);}
.white_content{display:none;position:absolute;top:25%;left:20%;z-index:1002;background:white;}
</style>
</head>
<body>
<div class="white_content" name="ppdiv">Test</div>
<div class="black_overlay"></div>
</body>
</html>
点此查看我的问题 http://i.stack.imgur.com/2uxYL.jpg
但是 blackoverlay 颜色没有完全应用。仅应用半页剩余
复制并粘贴以下代码并保存到html文件中并检查
<html>
<head>
<script src='http://code.jquery.com/jquery-2.1.1.min.js' type='text/javascript'></script>
<style>
.black_overlay {
display: none;
position: absolute;
top: 0%;
left: 0%;
width: 100%;
height: 100%;
background-color: black;
z-index: 1001;
-moz-opacity: 0.6;
opacity: .60;
filter: alpha(opacity=60);
}
.white_content {
display: none;
position: absolute;
top: 50%;
left: 50%;
z-index: 1002;
background: white;
position: fixed;
}
</style>
<script>
function opnpp() {
$(".white_content").show();
$(".black_overlay").show();
}
</script>
</head>
<body>
<input type="button" onclick="opnpp();" value="Open popup">
<br>
<b> (First option is consider as your answer)</b>
<br>
<br>
<table border="1px">
<tr>
<td>Topic</td>
<td><span id="section_type" class="flcapz"></span>
</td>
<td>Mark</td>
<td><span id="tot_Mark"></span>
</td>
<td rowspan="2">Total Question : <span id="tot_Question"></span>
</td>
</tr>
<tr>
<td>Total Answered</td>
<td><span id="tot_Answered"></span>
</td>
<td>Wrong Answer</td>
<td><span id="wrng_Answered"></span>
</td>
</tr>
</table>
<input type="button" value="Reset Test" onclick="resettest();">
<div class="question_2" id="q1" style="width:100%;margin-top:20px;margin-bottom:15px;">
<div id="ss1" class="alrdyblock" style="">Already Answered</div>
<div id="q1id1" style="display:none;">
<span class="allinworldspacls">First Important Line</span>
</div>
<div style="clear:both"></div>
<div class="question" style="margin-left: 22px;"><b>1.HTML stands for?</b>
</div>
<table width="40%" style="margin-left: 24px;">
<tr>
<td>
<label style="cursor: pointer;">
<input data-item="i1" data="q1id1" class="cmn" type="radio" name="n1" value="o1">Home Text Markup Language</label>
</td>
<td>
<label style="cursor: pointer;">
<input data-item="i2" data="q1id1" class="cmn" type="radio" name="n1" value="o2">Hyper Text Margin Language</label>
</td>
</tr>
<tr>
<td>
<label style="cursor: pointer;">
<input data-item="i3" data="q1id1" class="cmn" type="radio" name="n1" value="o3">Home Transfer Markup Language</label>
</td>
<td>
<label style="cursor: pointer;">
<input data-item="i4" data="q1id1" class="cmn" type="radio" name="n1" value="answer">Hyper Text Markup Language</label>
</td>
</tr>
</table>
<br>
<a class="#" onclick="view_ans(1,this);return false;" href="#">Answer/Solution</a>
</div>
<div class="question_2" id="q2" style="margin-bottom:15px;">
<div id="ss2" class="alrdyblock">Already Answered</div>
<div id="q1id2" style="display:none;">
<span class="allinworldspacls"></span>
</div>
<div class="question" style="margin-left: 22px;"><b>2. HTML tags are place inside in what?</b>
</div>
<table width="40%" style="margin-left: 24px;">
<tr>
<td>
<label style="cursor: pointer;">
<input data-item="i1" data="q1id2" class="cmn" type="radio" name="n2" value="o1">Pick</label>
</td>
<td>
<label style="cursor: pointer;">
<input data-item="i2" data="q1id2" class="cmn" type="radio" name="n2" value="answer"><and></label>
</td>
</tr>
<tr>
<td>
<label style="cursor: pointer;">
<input data-item="i3" data="q1id2" class="cmn" type="radio" name="n2" value="o2">Deer</label>
</td>
<td>
<label style="cursor: pointer;">
<input data-item="i4" data="q1id2" class="cmn" type="radio" name="n2" value="o3">Cow</label>
</td>
</tr>
</table>
<br>
<a class="#" onclick="view_ans(2,this);return false;" href="#">Answer/Solution</a>
</div>
<div class="question_2" id="q3" style="margin-bottom:15px;">
<div id="ss3" class="alrdyblock">Already Answered</div>
<div id="q1id3" style="display:none;">
<span class="allinworldspacls"></span>
</div>
<div class="question" style="margin-left: 22px;"><b>3. tags and text are placed inside which tag?</b>
</div>
<table width="40%" style="margin-left: 24px;">
<tr>
<td>
<label style="cursor: pointer;">
<input data-item="i1" data="q1id3" class="cmn" type="radio" value="o1" name="n3">Pick</label>
</td>
<td>
<label style="cursor: pointer;">
<input data-item="i2" data="q1id3" class="cmn" type="radio" value="o2" name="n3">Dog</label>
</td>
</tr>
<tr>
<td>
<label style="cursor: pointer;">
<input data-item="i3" data="q1id3" class="cmn" type="radio" value="o3" name="n3">Deer</label>
</td>
<td>
<label style="cursor: pointer;">
<input data-item="i4" data="q1id3" class="cmn" type="radio" value="answer" name="n3">Cow</label>
</td>
</tr>
</table>
<br>
<a class="#" onclick="view_ans(3,this);return false;" href="#">Answer/Solution</a>
</div>
<div class="question_2" id="q4" style="margin-bottom:15px;">
<div id="ss4" class="alrdyblock">Already Answered</div>
<div id="q1id4" style="display:none;">
<span class="allinworldspacls"></span>
</div>
<div class="question" style="margin-left: 22px;"><b>4. What is the mening of the below?</b>
</div>
<table width="40%" style="margin-left: 24px;">
<tr>
<td>
<label style="cursor: pointer;">
<input data-item="i1" data="q1id4" class="cmn" type="radio" value="o1" name="n4">Pick</label>
</td>
<td>
<label style="cursor: pointer;">
<input data-item="i2" data="q1id4" class="cmn" type="radio" value="o2" name="n4">Dog</label>
</td>
</tr>
<tr>
<td>
<label style="cursor: pointer;">
<input data-item="i3" data="q1id4" class="cmn" type="radio" value="o3" name="n4">Deer</label>
</td>
<td>
<label style="cursor: pointer;">
<input data-item="i4" data="q1id4" class="cmn" type="radio" value="answer" name="n4">Cow</label>
</td>
</tr>
</table>
<br>
<a class="#" onclick="view_ans(4,this);return false;" href="#">Answer/Solution</a>
</div>
<div class="question_2" id="q5" style="margin-bottom:15px;">
<div id="ss5" class="alrdyblock">Already Answered</div>
<div id="q1id5" style="display:none;">
<span class="allinworldspacls"></span>
</div>
<div class="question" style="margin-left: 22px;"><b>5. What is the mening of the below?</b>
</div>
<table width="40%" style="margin-left: 24px;">
<tr>
<td>
<label style="cursor: pointer;">
<input data-item="i1" data="q1id5" class="cmn" type="radio" value="o1" name="n5">Pick</label>
</td>
<td>
<label style="cursor: pointer;">
<input data-item="i2" data="q1id5" class="cmn" type="radio" value="o2" name="n5">Dog</label>
</td>
</tr>
<tr>
<td>
<label style="cursor: pointer;">
<input data-item="i3" data="q1id5" class="cmn" type="radio" value="o3" name="n5">Deer</label>
</td>
<td>
<label style="cursor: pointer;">
<input data-item="i4" data="q1id5" class="cmn" type="radio" value="answer" name="n5">Cow</label>
</td>
</tr>
</table>
<br>
<a class="#" onclick="view_ans(5,this);return false;" href="#">Answer/Solution</a>
</div>
<div class="question_2" id="q6" style="margin-bottom:15px;">
<div id="ss6" class="alrdyblock">Already Answered</div>
<div id="q1id6" style="display:none;">
<span class="allinworldspacls"></span>
</div>
<div class="question" style="margin-left: 22px;"><b>6. What is the mening of the below?</b>
</div>
<table width="40%" style="margin-left: 24px;">
<tr>
<td>
<label style="cursor: pointer;">
<input data-item="i1" data="q1id6" class="cmn" type="radio" value="o1" name="n6">Pick</label>
</td>
<td>
<label style="cursor: pointer;">
<input data-item="i2" data="q1id6" class="cmn" type="radio" value="o2" name="n6">Dog</label>
</td>
</tr>
<tr>
<td>
<label style="cursor: pointer;">
<input data-item="i3" data="q1id6" class="cmn" type="radio" value="o3" name="n6">Deer</label>
</td>
<td>
<label style="cursor: pointer;">
<input data-item="i4" data="q1id6" class="cmn" type="radio" value="answer" name="n6">Cow</label>
</td>
</tr>
</table>
<br>
<a class="#" onclick="view_ans(6,this);return false;" href="#">Answer/Solution</a>
</div>
<div class="question_2" id="q7" style="margin-bottom:15px;">
<div id="ss7" class="alrdyblock">Already Answered</div>
<div id="q1id7" style="display:none;">
<span class="allinworldspacls"></span>
</div>
<div class="question" style="margin-left: 22px;"><b>7. What is the mening of the below?</b>
</div>
<table width="40%" style="margin-left: 24px;">
<tr>
<td>
<label style="cursor: pointer;">
<input data-item="i1" data="q1id7" class="cmn" type="radio" value="o1" name="n7">Pick</label>
</td>
<td>
<label style="cursor: pointer;">
<input data-item="i2" data="q1id7" class="cmn" type="radio" value="o2" name="n7">Dog</label>
</td>
</tr>
<tr>
<td>
<label style="cursor: pointer;">
<input data-item="i3" data="q1id7" class="cmn" type="radio" value="o3" name="n7">Deer</label>
</td>
<td>
<label style="cursor: pointer;">
<input data-item="i4" data="q1id7" class="cmn" type="radio" value="answer" name="n7">Cow</label>
</td>
</tr>
</table>
<br>
<a class="#" onclick="view_ans(7,this);return false;" href="#">Answer/Solution</a>
</div>
<div class="question_2" id="q8" style="margin-bottom:15px;">
<div id="ss8" class="alrdyblock">Already Answered</div>
<div id="q1id8" style="display:none;">
<span class="allinworldspacls"></span>
</div>
<div class="question" style="margin-left: 22px;"><b>8. What is the mening of the below?</b>
</div>
<table width="40%" style="margin-left: 24px;">
<tr>
<td>
<label style="cursor: pointer;">
<input data-item="i1" data="q1id8" class="cmn" type="radio" value="o1" name="n8">Pick</label>
</td>
<td>
<label style="cursor: pointer;">
<input data-item="i2" data="q1id8" class="cmn" type="radio" value="o2" name="n8">Dog</label>
</td>
</tr>
<tr>
<td>
<label style="cursor: pointer;">
<input data-item="i3" data="q1id8" class="cmn" type="radio" value="o3" name="n8">Deer</label>
</td>
<td>
<label style="cursor: pointer;">
<input data-item="i4" data="q1id8" class="cmn" type="radio" value="answer" name="n8">Cow</label>
</td>
</tr>
</table>
<br>
<a class="#" onclick="view_ans(8,this);return false;" href="#">Answer/Solution</a>
</div>
<br>
<br>
<br>
<br>
<div class="white_content" name="ppdiv">
Test
</div>
<div class="black_overlay"></div>
</body>
</html>最佳答案
把.black_overlay的样式改成这样就可以了
.black_overlay {
display:none;
position:fixed;
top:0;
left:0;
right:0;
bottom:0;
background-color:black;
z-index:1001;
-moz-opacity:0.6;
opacity:.60;
filter:alpha(opacity=60);
}
像你的.white_overlay一样使用position: fixed，然后指定top、left、right,bottom为0,则大功告成
<html>
<head>
<script src='http://code.jquery.com/jquery-2.1.1.min.js' type='text/javascript'></script>
<style>
.black_overlay {
display:none;
position:fixed;
top:0;
left:0;
right:0;
bottom:0;
background-color:black;
z-index:1001;
-moz-opacity:0.6;
opacity:.60;
filter:alpha(opacity=60);
}
.white_content {
display: none;
position: absolute;
top: 50%;
left: 50%;
z-index: 1002;
background: white;
position: fixed;
}
</style>
<script>
function opnpp() {
$(".white_content").show();
$(".black_overlay").show();
}
</script>
</head>
<body>
<input type="button" onclick="opnpp();" value="Open popup">
<br>
<b> (First option is consider as your answer)</b>
<br>
<br>
<table border="1px">
<tr>
<td>Topic</td>
<td><span id="section_type" class="flcapz"></span>
</td>
<td>Mark</td>
<td><span id="tot_Mark"></span>
</td>
<td rowspan="2">Total Question : <span id="tot_Question"></span>
</td>
</tr>
<tr>
<td>Total Answered</td>
<td><span id="tot_Answered"></span>
</td>
<td>Wrong Answer</td>
<td><span id="wrng_Answered"></span>
</td>
</tr>
</table>
<input type="button" value="Reset Test" onclick="resettest();">
<div class="question_2" id="q1" style="width:100%;margin-top:20px;margin-bottom:15px;">
<div id="ss1" class="alrdyblock" style="">Already Answered</div>
<div id="q1id1" style="display:none;">
<span class="allinworldspacls">First Important Line</span>
</div>
<div style="clear:both"></div>
<div class="question" style="margin-left: 22px;"><b>1.HTML stands for?</b>
</div>
<table width="40%" style="margin-left: 24px;">
<tr>
<td>
<label style="cursor: pointer;">
<input data-item="i1" data="q1id1" class="cmn" type="radio" name="n1" value="o1">Home Text Markup Language</label>
</td>
<td>
<label style="cursor: pointer;">
<input data-item="i2" data="q1id1" class="cmn" type="radio" name="n1" value="o2">Hyper Text Margin Language</label>
</td>
</tr>
<tr>
<td>
<label style="cursor: pointer;">
<input data-item="i3" data="q1id1" class="cmn" type="radio" name="n1" value="o3">Home Transfer Markup Language</label>
</td>
<td>
<label style="cursor: pointer;">
<input data-item="i4" data="q1id1" class="cmn" type="radio" name="n1" value="answer">Hyper Text Markup Language</label>
</td>
</tr>
</table>
<br>
<a class="#" onclick="view_ans(1,this);return false;" href="#">Answer/Solution</a>
</div>
<div class="question_2" id="q2" style="margin-bottom:15px;">
<div id="ss2" class="alrdyblock">Already Answered</div>
<div id="q1id2" style="display:none;">
<span class="allinworldspacls"></span>
</div>
<div class="question" style="margin-left: 22px;"><b>2. HTML tags are place inside in what?</b>
</div>
<table width="40%" style="margin-left: 24px;">
<tr>
<td>
<label style="cursor: pointer;">
<input data-item="i1" data="q1id2" class="cmn" type="radio" name="n2" value="o1">Pick</label>
</td>
<td>
<label style="cursor: pointer;">
<input data-item="i2" data="q1id2" class="cmn" type="radio" name="n2" value="answer"><and></label>
</td>
</tr>
<tr>
<td>
<label style="cursor: pointer;">
<input data-item="i3" data="q1id2" class="cmn" type="radio" name="n2" value="o2">Deer</label>
</td>
<td>
<label style="cursor: pointer;">
<input data-item="i4" data="q1id2" class="cmn" type="radio" name="n2" value="o3">Cow</label>
</td>
</tr>
</table>
<br>
<a class="#" onclick="view_ans(2,this);return false;" href="#">Answer/Solution</a>
</div>
<div class="question_2" id="q3" style="margin-bottom:15px;">
<div id="ss3" class="alrdyblock">Already Answered</div>
<div id="q1id3" style="display:none;">
<span class="allinworldspacls"></span>
</div>
<div class="question" style="margin-left: 22px;"><b>3. tags and text are placed inside which tag?</b>
</div>
<table width="40%" style="margin-left: 24px;">
<tr>
<td>
<label style="cursor: pointer;">
<input data-item="i1" data="q1id3" class="cmn" type="radio" value="o1" name="n3">Pick</label>
</td>
<td>
<label style="cursor: pointer;">
<input data-item="i2" data="q1id3" class="cmn" type="radio" value="o2" name="n3">Dog</label>
</td>
</tr>
<tr>
<td>
<label style="cursor: pointer;">
<input data-item="i3" data="q1id3" class="cmn" type="radio" value="o3" name="n3">Deer</label>
</td>
<td>
<label style="cursor: pointer;">
<input data-item="i4" data="q1id3" class="cmn" type="radio" value="answer" name="n3">Cow</label>
</td>
</tr>
</table>
<br>
<a class="#" onclick="view_ans(3,this);return false;" href="#">Answer/Solution</a>
</div>
<div class="question_2" id="q4" style="margin-bottom:15px;">
<div id="ss4" class="alrdyblock">Already Answered</div>
<div id="q1id4" style="display:none;">
<span class="allinworldspacls"></span>
</div>
<div class="question" style="margin-left: 22px;"><b>4. What is the mening of the below?</b>
</div>
<table width="40%" style="margin-left: 24px;">
<tr>
<td>
<label style="cursor: pointer;">
<input data-item="i1" data="q1id4" class="cmn" type="radio" value="o1" name="n4">Pick</label>
</td>
<td>
<label style="cursor: pointer;">
<input data-item="i2" data="q1id4" class="cmn" type="radio" value="o2" name="n4">Dog</label>
</td>
</tr>
<tr>
<td>
<label style="cursor: pointer;">
<input data-item="i3" data="q1id4" class="cmn" type="radio" value="o3" name="n4">Deer</label>
</td>
<td>
<label style="cursor: pointer;">
<input data-item="i4" data="q1id4" class="cmn" type="radio" value="answer" name="n4">Cow</label>
</td>
</tr>
</table>
<br>
<a class="#" onclick="view_ans(4,this);return false;" href="#">Answer/Solution</a>
</div>
<div class="question_2" id="q5" style="margin-bottom:15px;">
<div id="ss5" class="alrdyblock">Already Answered</div>
<div id="q1id5" style="display:none;">
<span class="allinworldspacls"></span>
</div>
<div class="question" style="margin-left: 22px;"><b>5. What is the mening of the below?</b>
</div>
<table width="40%" style="margin-left: 24px;">
<tr>
<td>
<label style="cursor: pointer;">
<input data-item="i1" data="q1id5" class="cmn" type="radio" value="o1" name="n5">Pick</label>
</td>
<td>
<label style="cursor: pointer;">
<input data-item="i2" data="q1id5" class="cmn" type="radio" value="o2" name="n5">Dog</label>
</td>
</tr>
<tr>
<td>
<label style="cursor: pointer;">
<input data-item="i3" data="q1id5" class="cmn" type="radio" value="o3" name="n5">Deer</label>
</td>
<td>
<label style="cursor: pointer;">
<input data-item="i4" data="q1id5" class="cmn" type="radio" value="answer" name="n5">Cow</label>
</td>
</tr>
</table>
<br>
<a class="#" onclick="view_ans(5,this);return false;" href="#">Answer/Solution</a>
</div>
<div class="question_2" id="q6" style="margin-bottom:15px;">
<div id="ss6" class="alrdyblock">Already Answered</div>
<div id="q1id6" style="display:none;">
<span class="allinworldspacls"></span>
</div>
<div class="question" style="margin-left: 22px;"><b>6. What is the mening of the below?</b>
</div>
<table width="40%" style="margin-left: 24px;">
<tr>
<td>
<label style="cursor: pointer;">
<input data-item="i1" data="q1id6" class="cmn" type="radio" value="o1" name="n6">Pick</label>
</td>
<td>
<label style="cursor: pointer;">
<input data-item="i2" data="q1id6" class="cmn" type="radio" value="o2" name="n6">Dog</label>
</td>
</tr>
<tr>
<td>
<label style="cursor: pointer;">
<input data-item="i3" data="q1id6" class="cmn" type="radio" value="o3" name="n6">Deer</label>
</td>
<td>
<label style="cursor: pointer;">
<input data-item="i4" data="q1id6" class="cmn" type="radio" value="answer" name="n6">Cow</label>
</td>
</tr>
</table>
<br>
<a class="#" onclick="view_ans(6,this);return false;" href="#">Answer/Solution</a>
</div>
<div class="question_2" id="q7" style="margin-bottom:15px;">
<div id="ss7" class="alrdyblock">Already Answered</div>
<div id="q1id7" style="display:none;">
<span class="allinworldspacls"></span>
</div>
<div class="question" style="margin-left: 22px;"><b>7. What is the mening of the below?</b>
</div>
<table width="40%" style="margin-left: 24px;">
<tr>
<td>
<label style="cursor: pointer;">
<input data-item="i1" data="q1id7" class="cmn" type="radio" value="o1" name="n7">Pick</label>
</td>
<td>
<label style="cursor: pointer;">
<input data-item="i2" data="q1id7" class="cmn" type="radio" value="o2" name="n7">Dog</label>
</td>
</tr>
<tr>
<td>
<label style="cursor: pointer;">
<input data-item="i3" data="q1id7" class="cmn" type="radio" value="o3" name="n7">Deer</label>
</td>
<td>
<label style="cursor: pointer;">
<input data-item="i4" data="q1id7" class="cmn" type="radio" value="answer" name="n7">Cow</label>
</td>
</tr>
</table>
<br>
<a class="#" onclick="view_ans(7,this);return false;" href="#">Answer/Solution</a>
</div>
<div class="question_2" id="q8" style="margin-bottom:15px;">
<div id="ss8" class="alrdyblock">Already Answered</div>
<div id="q1id8" style="display:none;">
<span class="allinworldspacls"></span>
</div>
<div class="question" style="margin-left: 22px;"><b>8. What is the mening of the below?</b>
</div>
<table width="40%" style="margin-left: 24px;">
<tr>
<td>
<label style="cursor: pointer;">
<input data-item="i1" data="q1id8" class="cmn" type="radio" value="o1" name="n8">Pick</label>
</td>
<td>
<label style="cursor: pointer;">
<input data-item="i2" data="q1id8" class="cmn" type="radio" value="o2" name="n8">Dog</label>
</td>
</tr>
<tr>
<td>
<label style="cursor: pointer;">
<input data-item="i3" data="q1id8" class="cmn" type="radio" value="o3" name="n8">Deer</label>
</td>
<td>
<label style="cursor: pointer;">
<input data-item="i4" data="q1id8" class="cmn" type="radio" value="answer" name="n8">Cow</label>
</td>
</tr>
</table>
<br>
<a class="#" onclick="view_ans(8,this);return false;" href="#">Answer/Solution</a>
</div>
<br>
<br>
<br>
<br>
<div class="white_content" name="ppdiv">
Test
</div>
<div class="black_overlay"></div>
</body>
</html>*注意:您同时使用position: absolute 和position: fixed 作为您的.white_overlay，删除absolute code>一个因为没用
关于html - 黑色覆盖未应用整页，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/28828380/