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

Question

I am making a pop up on one of my project.

CSS Code

<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>

Content CSS

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

    }

JAVASCRIPT Code

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

}

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

HTML Code

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

But the problem is that, it is fine but the opacity or page background which I putting on it, it is displaying on half page, not on full page. Displaying by this code. background-color: rgba(0, 0, 0, 0.95); Please tell me, where is the problem.

I can't keep the position fixed, because my pop up is longer then original page size and it is coming with scroll and cross the footer link too.

Any help will be appreciated.

Thanks

Answer 1

I think the problem is not related with an opacity issue. You say that your .modalContainer is 100% width and height but you start it at 50% top left. So the whole thing is 150% width and height, while #modalPage is only 100% width and height.

If you know the exact width and height of your container I suggest you to simply modify your css to center propertly the container. For example:

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

Working example: http://jsfiddle.net/L2cXP/

If you want a modal longer than the page itself, i suggest a new approach.

We can ignore vertical centering because the modal is longer than the page. We just want that #modalPage has a overflow: auto property so it will show a scrollbar when its contents are longer than it.

Probably you would like to add an overflow: hidden property to the body when the modal shows to block the standard scrollbar of your page.

Check this working example: http://jsfiddle.net/L2cXP/1/

Answer 2

try:

#modalPage {
    position: fixed;
}

http://jsfiddle.net/68Sty/

Answer 3

.modalContainer has a "left" of 50%, so starting at halfway is expected. Try something like:

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

Answer 4

try this

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

your css

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

Answer 5

A little CSS magic - and we have simple and nice CSS popups with no javascript positioning! consider this demo:

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>

I define .csspopup-overlay and .csspopup-popup in CSS as follows:

.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
}

Demo: http://jsfiddle.net/acA73/

Note: I extracted these CSS for you from https://github.com/dfsq/cssPopup jQuery plugin.