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

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仅宽度和高度。

如果您知道容器的确切宽度和高度，建议您简单地修改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具有溢出：自动属性，因此当它的内容长于其更长时，它将显示一个滚动条。

可能您想在模态显示以阻止页面的标准滚动条时添加溢出：隐藏的属性。

检查此工作示例：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。