解决方案

Question

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文件中并检查

＆＃13;

<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>&nbsp;&nbsp;&nbsp;(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">&lt;and&gt;</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>

＆＃13;

Answer 1

解决方案

再次查看了您的代码段，因为您的页面“滚动”，您使用position:fixed而不是position:absolute;是有意义的。这是因为div会“滚动”您，这意味着当它在屏幕上时，你将无法看到背后的白色背景。

我的版本

以下是您可以使用的css弹出设计示例。请注意，当前使用的jquery用于切换弹出窗口的可见性，而不再是。

$('.normaltext button').click(function() {
  $('.popuptext').addClass("activepopup");
});

$('.popuptext button').click(function() {
  $('.popuptext').removeClass("activepopup");
});

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}
.popuptext {
  display: none;
}
.activepopup {
  color: white;
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background: rgba(0, 0, 0, 0.8);
}
.popuptext button {
  position: absolute;
  top: 0;
  right: 0;
  color: red;
  font-size: 40px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="normaltext">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
  in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  <button>Open Popup</button>
</div>
<div class="popuptext">This is a popup
  <button>Close Popup</button>
</div>

Answer 2

只需将.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);
}

使用与您position: fixed类似的.white_overlay，然后将top，left，right，bottom指定为0，然后指定＆＃ 39;完成了

＆＃13;

<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>&nbsp;&nbsp;&nbsp;(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">&lt;and&gt;</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>

＆＃13;

*注意：您对position: absolute使用position: fixed和.white_overlay，删除了absolute，因为它未被使用

黑色叠加未应用整页

2 个答案:

解决方案

我的版本