Question

I have a pop up div working on click. I need to have the pop up appear in the browser where the user is looking. Right now on short pages the pop up div is no where to be found and on long pages you have to scroll way down to even see the pop up.

So far I have tried a couple different things in my popUpDiv with no luck.

margin: 30px auto 0;
    top: 50%;
    left: 50%;



 margin-left: -155px;
    margin-top: -700px;

Here is my css:

/*STYLES FOR CSS POPUP*/
#blanket {
   background-color:#111;
   opacity: 0.65;
   *background:none;
   position:absolute;
   z-index: 9001;
   top:0px;
   left:0px;
   width:100%;
}
#popUpDiv {
    padding: 40px;
    position:absolute;
    background-color: #f3f3f3;
    height:255px;
    border:5px solid #000;
    z-index: 9002;
    -moz-border-radius: 10px;
    -webkit-border-radius:10px;
    border-radius: 10px;
    margin-left: -155px;
    margin-top: -700px;
}
#popUpDiv a {position:relative; top:0px; right:10px}
/*END CSS POPUP*/

Here is what I have in my php file:

<!--POPUP--> 
<script type="text/javascript" src="http://domain.com/js/css-pop.js"></script>

    <div id="blanket" style="display:none;">
    </div>
    <div id="popUpDiv" style="display:none;">


        Pop Up content Here


    </div>
<!-- / POPUP-->

Answer 1

There’s more than a few ways to do what you’re trying to do in jscript, but the cadillac way to do it might be modal popups: http://www.script-tutorials.com/css3-modal-popups/ .