CODEWITHSUNDEEP
htmlcsspopupalignmentcenter
Chris
Chris

Reputation: 59491

Center a popup div

I'm doing a custom gallery for my website and I've got the overview part working with all the thumbnails. When a thumbnail is clicked, the full picture appears on the screen, but I'm having problems aligning it to the center of the screen.

Note that each picture has different dimensions.

This is what I have done so far:

.overlay{
    cursor: pointer;
    display: none;
    position: fixed;
    top: 0%;
    left: 0%;
    width: 100%;
    height: 100%;
    background-color: black;
    z-index:1001;
    -moz-opacity: 0.8;
    opacity:.80;
    filter: alpha(opacity=80);
}
.popup {
    display: none;
    position: absolute;
    margin: 0 auto;
    border: 8px solid orange;
    background-color: #eee;
    z-index:1002;
    overflow: auto;
}
.galleryentity{
    display: table;
    margin-bottom: 35px;
    float: left;
    width: 259px;
    height: 250px;
    background-color: #2B3039;
    margin-right: 30px;
    position: relative;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    -webkit-box-shadow: 0px 3px 5px 2px rgba(50, 50, 50, 0.75);
    -moz-box-shadow:    0px 3px 5px 2px rgba(50, 50, 50, 0.75);
    box-shadow:         0px 3px 5px 2px rgba(50, 50, 50, 0.75);
}
.gallerylink{
    display: block;
    height: 100%;
    width: 100%;
    text-decoration: none;
}

And here is the HTML:

<div class="galleryarea">
    <div class="galleryframe">
        <div class="galleryentity" style="background-image:url('pic1.jpg');">
            <a href="javascript:void(0)" class="gallerylink" onclick = "document.getElementById('pic1').style.display='block';document.getElementById('fade').style.display='block'"></a>
            <div id="pic1" class="white_content"><img class="pic1.jpg"></div>
        </div>
        .
        .
        .
    </div>
</div>

Thanks.

Upvotes: 0

Views: 239

Answers (2)

K K
K K

Reputation: 18099

I guess, you have to use body in your case: Demo : http://jsfiddle.net/lotusgodkk/GCu2D/177/

JS:

$(document).ready(function () {
    $(".checked").position({
        "my": "center",
        "at": "center",
        "of": 'body' //Or window
    });
});

Upvotes: 0

Abhinav Gauniyal
Abhinav Gauniyal

Reputation: 7574

CSS approach to center popup : 

.popup {

      position:fixed;
      /*display: none;*/    /* debug */
      border: 2px solid orange;  /* 8 is too thick ? */
      background-color: #eee;
      z-index:1002;
      overflow: auto;
      top:50%;
      left:50%;
      width:500px;  /* adjust accordingly */
      height:500px;   /* adjust accordingly */
      margin-left:-250px;   /* negative half of width above */
      margin-top:-250px;   /* negative half of height above */

       }

Upvotes: 2

Related Questions