javascript - 不透明度或页面背景显示在弹出窗口的半页上

Question

我正在为我的一个元素制作一个弹出窗口。

CSS 代码

<style type="text/css">
    #modalPage
    {
      display: none;
      position: absolute;
      width: 100%;
      height: 100%;
      top: 0px;
      left: 0px;
      background-color: rgba(0, 0, 0, 0.95);
      z-index: 999;
    }
    .modalContainer
    {
      position: absolute;
      width: 100%;
      height: 100%;
      left: 50%;
      top: 50%;
      z-index: 999;
    }
    </style>

内容 CSS

.modal
    {
      background-color: #6f9255;
      position: relative;
      top: -300px;
      left: -305px;
      z-index: 1000;
      width: 600px;
      overflow:auto;

    }

JavaScript代码

<script type="text/javascript">
function myFunction() {
     document.getElementById('modalPage').style.display = "block";

}

function hideModal()
    {
      document.getElementById('modalPage').style.display = "none";
    }
</script>

HTML代码

<div id="modalPage">
      <div class="modalContainer">
        <div class="modal"> </div>
      </div>
</div>

但问题是，它很好，但我放在上面的不透明度或页面背景，它显示在半页上，而不是整页上。通过此代码显示。 背景颜色:rgba(0, 0, 0, 0.95);请告诉我，问题出在哪里。

我无法保持位置固定，因为我的弹出窗口比原始页面大小长，而且它还带有滚动条并穿过页脚链接。

我们将不胜感激。

谢谢

Answer 1

我认为这个问题与不透明度问题无关。你说你的 .modalContainer 是 100% 的宽度和高度，但你从左上角的 50% 开始。所以整个东西是 150% 的宽度和高度，而 #modalPage 只有 100% 的宽度和高度。

如果您知道容器的确切宽度和高度，我建议您简单地修改您的 css 以使容器正确居中。例如:

.modalContainer
    {
      position: absolute;
      width: 50%;
      height: 50%;
      left: 25%;
      top: 25%;
      z-index: 999;
      background-color: red; /*added to see where the container is*/
    }

工作示例: http://jsfiddle.net/L2cXP/

如果您想要比页面本身更长的模式，我建议采用一种新方法。

我们可以忽略垂直居中，因为模式比页面长。我们只希望 #modalPage 有一个 overflow: auto 属性，这样当它的内容比它长时它会显示一个滚动条。

当模态显示以阻止页面的标准滚动条时，您可能想向正文添加 overflow: hidden 属性。

检查这个工作示例: http://jsfiddle.net/L2cXP/1/