文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
首页
学习
活动
专区
圈层
工具
MCP广场
返回腾讯云官网
社区首页 >问答首页 >黑色覆盖未应用整页

问黑色覆盖未应用整页
EN

Stack Overflow用户
提问于 2015-03-03 09:37:01
回答 2查看 53关注 0票数 0

黑色叠加效应不适用于全背景。

代码语言：javascript
运行
复制
<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

但这种黑色叠加的颜色并不完全适用。半页仅适用于剩余

复制并粘贴以下代码并保存在html文件中并检查

​

代码语言：javascript
运行
复制
<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>

​

html
css
EN

Stack Overflow用户

发布于 2015-03-03 09:54:51

解决方案

再次查看您的代码片段，因为您的页面‘卷轴’，这将是有意义的使用position:fixed而不是position:absolute; -这是因为div将‘与您一起滚动，意味着您将无法看到后面的白色背景，当它在屏幕上。

我的版本

下面是一个可以使用的css弹出设计示例。注意，当前使用的jquery是用来切换弹出窗口的可见性的，而不是更多。

​

代码语言：javascript
运行
复制
$('.normaltext button').click(function() {
  $('.popuptext').addClass("activepopup");
});

$('.popuptext button').click(function() {
  $('.popuptext').removeClass("activepopup");
});
代码语言：javascript
运行
复制
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;
}
代码语言：javascript
运行
复制
<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>

​

票数 0
EN
查看全部 2 条回答
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/28828380

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2025 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 深公网安备号 44030502008569

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号 | 京公网安备号11010802020287

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档