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

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>

但问题是，它很好，但是我把它放在不透明度或页面背景上，它显示在半页上，而不是在整页上。 按此代码显示。 background-color: 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属性，所以当它的内容比它长时，它会显示一个滚动条。

当模态显示阻止页面的标准滚动条时，您可能希望向body添加overflow：hidden属性。

检查此工作示例： http://jsfiddle.net/L2cXP/1/

Answer 2

尝试：

#modalPage {
    position: fixed;
}

http://jsfiddle.net/68Sty/

Answer 3

.modalContainer的“左”为50％，因此预计从中途开始。尝试类似：

.modalContainer {
    position: absolute;
    width: 100%;
    height: 100%;
    top:0;
    left:0;
    right:0;
    bottom:0;
    z-index: 999;
}

Answer 4

试试这个

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

你的css

 .relative{
     position:relative;
     zoom:1;
     height:100%; 
     width:100%;
 }

Answer 5

一点CSS魔术 - 我们有简单而漂亮的CSS弹出窗口，没有javascript定位！考虑一下这个演示：

HTML：

<div id="modalPage" class="csspopup-overlay">
    <div class="modalContainer csspopup-popup">
        <div class="csspopup-close" onclick="hideModal()">&times;</div>
        <div class="modal">Some modal content</div>
    </div>
</div>

我在CSS中定义.csspopup-overlay和.csspopup-popup，如下所示：

.csspopup-overlay {
        position: fixed;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, .5);
        text-align: center;
}
.csspopup-overlay:after, .csspopup-valignfix {
        display: inline-block;
        *display: inline;
        *zoom: 1;
        height: 100%;
        width: 0;
        vertical-align: middle;
        content: '';
}
.csspopup-popup {
        display: inline-block;
        *display: inline;
        *zoom: 1;
        position: relative;
        max-width: 80%;
        padding: 15px;
        box-shadow: 0 0 15px 5px rgba(0, 0, 0, 0.3);
        background: #FFF;
        vertical-align: middle;
        border-radius: 6px;
}
.csspopup-popup > .csspopup-close {
        display: block;
        position: absolute;
        top: -15px;
        right: -12px;
        width: 12px;
        height: 12px;
        padding: 4px;
        border: 4px solid #fff;
        border-radius: 50%;
        box-shadow: inset 0 2px 2px 2px rgba(0, 0, 0, 0.2), 0 2px 5px rgba(0, 0, 0, .4);
        cursor: pointer;
        background: #555;
        color: #FFF;
        text-align: center;
        font-size: 12px;
        line-height: 12px;
        text-decoration: none;
        font-weight: bold
}

演示：http://jsfiddle.net/acA73/

注意：我从https://github.com/dfsq/cssPopup jQuery插件中为您提取了这些CSS。