CODEWITHSUNDEEP
css
user1907680
user1907680

Reputation: 23

CSS cross browser centering

I am working on Popup box, I have got a page wherein I click on a button it popups a box. Ths problem is the popup is not in the center of the screen. I have to make the page cross browser compatible.

Here is my code.

CSS:

.popup{
    /* css3 drop shadow */
    -webkit-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
       -moz-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
    /* css3 border radius */
    -webkit-border-radius: 5px;
       -moz-border-radius: 5px;
    background:#eee;
    /* styling of the dialog box, i have a fixed dimension for this demo */
    width:50%;
    /* make sure it has the highest z-index */
    clear:both; 
    height:240px;
    position:relative;
    z-index:5000;
    /* hide it by default */
    display:none;
}

Upvotes: 2

Views: 438

Answers (1)

Mooseman
Mooseman

Reputation: 18891

Centered horizontally and vertically:

.popup{
    -webkit-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
       -moz-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
            box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
    -webkit-border-radius: 5px;
       -moz-border-radius: 5px;
            border-radius: 5px;
    background: #eee;
    width: 50%;
    height: 240px;
    z-index: 5000;
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -25%;
    margin-top: -120px;
    clear: both;
//    display: none;
}

Fiddle: http://jsfiddle.net/AwCWs/

Upvotes: 4

Related Questions