CODEWITHSUNDEEP
htmlcss
arifix
arifix

Reputation: 750

popup doesn't apperar on right position

Live site- http://uposonghar.com/new-video/

If you go to that site then hover on embedded YouTube video then 2 sharing button will appear, 1 for facebook & 1 for twitter. After clicking on that button instant share window appear & after 5 second another popup will appear like that- enter image description here

But that popup doesn't appear on right position, i want to make it center on vertically+horizontally.

My css code-

#reveal-modal-bg {
 position: fixed;
 height: 100%;
 width: 100%;
 background: #000;
 background: rgba(0,0,0,.8);
 z-index: 100;
 display: none;
 top: 0;
 left: 0;
}
.reveal-modal {
 visibility: hidden;
 top: 100px;
 left: 50%;
 margin-left: -300px;
 width: 520px;
 background: #eee;
 position: fixed;
 z-index: 101;
 -moz-border-radius: 5px;
 -webkit-border-radius: 5px;
 border-radius: 5px;
 -moz-box-shadow: 0 0 10px rgba(0,0,0,.4);
 -webkit-box-shadow: 0 0 10px rgba(0,0,0,.4);
 -box-shadow: 0 0 10px rgba(0,0,0,.4);
 text-align:center;
 padding:20px 15px 30px;
}

Upvotes: 0

Views: 106

Answers (5)

Edmundo Santos
Edmundo Santos

Reputation: 613

If you declare the height, you could do this to keep the overlay div always be centralized both vertically and horizontally:

.reveal-modal {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
    height: 340px; /* must be declared */
}

Check out the demo on JSFiddle.

That is a great article by Stephen Shaw with several ways of achieving absolute centering.

Upvotes: 6

Dev Man
Dev Man

Reputation: 2137

first of all remove the top:300px inline style then define the height as height:50% and top:25% and it will become centered

Upvotes: 0

LcSalazar
LcSalazar

Reputation: 16831

You dont need to absolute center the element. Neither use CSS3 formulas. Just work with display:table-cell and vertical-align: middle.

Here is a concept of vertical and horizontal centering divs:

<div class="modal-bg">
    <div class="modal">
        <div class="window">Test</div>
    </div>
</div>

And css:

.modal-bg
{
    display:table;
    width: 100%;
    height: 100%;
    position:fixed;
    left: 0px;
    top: 0px;
}

.modal
{
    position: relative;
    display: table-cell;
    vertical-align: middle;
    width: 100%;
    height: 100%;
}

.window
{
    margin: 0 auto;
    width:200px;
    height: 200px;
    background-color: red;
}

Try it out... It will do the trick
http://jsfiddle.net/69skp/1/

Upvotes: 1

MichaelM
MichaelM

Reputation: 1109

Easiest way I can see would be to copy the way you centered it horizontally:

.reveal-modal { top: 50%; margin-top: -186px; }

This is assuming the box height is usually consistent

Upvotes: 2

enguerranws
enguerranws

Reputation: 8233

Try : 

.reveal-modal {
 visibility: hidden;
 top: 50% !important; // there
 -webkit-transform: translateY(-50%); // and there
 transform: translateY(-50%); // and there
 left: 50%;
 margin-left: -300px;
 width: 520px;
 background: #eee;
 position: fixed;
 z-index: 101;
 -moz-border-radius: 5px;
 -webkit-border-radius: 5px;
 border-radius: 5px;
 -moz-box-shadow: 0 0 10px rgba(0,0,0,.4);
 -webkit-box-shadow: 0 0 10px rgba(0,0,0,.4);
 -box-shadow: 0 0 10px rgba(0,0,0,.4);
 text-align:center;
 padding:20px 15px 30px;
}

:)

Upvotes: 1

Related Questions