
I have a problem. If the page is really long.. How do I get the popup box to appear within the visible field? At the moment it shows up in the middle of the page, and the scroll jumps to top of page? 


I would like the popup to appear at the current location in the scroll (in view) and not even change the current scrolling position. Scroll down to see link and test. 


Thanks so much. 


Code: <http://jsfiddle.net/gyeo03nk/6/>


Javascript



```
$(document).ready(function () {

// if user clicked on button, the overlay layer or the dialogbox, close the dialog  
$('a.btn-ok, #dialog-overlay, #dialog-box').click(function () {     
    $('#dialog-overlay, #dialog-box').hide();       
    return false;
});

// if user resize the window, call the same function again
// to make sure the overlay fills the screen and dialogbox aligned to center    
$(window).resize(function () {

    //only do it if the dialog box is not hidden
    if (!$('#dialog-box').is(':hidden')) popup();       
}); 


});

//Popup dialog
function popup(message) {

// get the screen height and width  
var maskHeight = $(document).height();  
var maskWidth = $(window).width();

// calculate the values for center alignment
var dialogTop =  (maskHeight/3) - ($('#dialog-box').height());  
var dialogLeft = (maskWidth/2) - ($('#dialog-box').width()/2); 

// assign values to the overlay and dialog box
$('#dialog-overlay').css({height:maskHeight, width:maskWidth}).show();
$('#dialog-box').css({top:dialogTop, left:dialogLeft}).show();

// display the message
$('#dialog-message').html(message);

}

```

CSS:



```
    /* Popup window ----------------------------------------*/

#dialog-overlay {

    /* set it to fill the whil screen */
    width:100%; 
    height:100%;

    /* transparency for different browsers */
    filter:alpha(opacity=50); 
    -moz-opacity:0.5; 
    -khtml-opacity: 0.5; 
    opacity: 0.5; 
    background:#000; 

    /* make sure it appear behind the dialog box but above everything else */
    position:absolute; 
    top:0; left:0; 
    z-index:3000; 

    /* hide it by default */
    display:none;
}


#dialog-box {

    /* 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 */
    -moz-border-radius: 15px;
    -webkit-border-radius: 15px;

    background:#eee;
    /* styling of the dialog box, i have a fixed dimension for this demo */ 
    width:328px; 

    /* make sure it has the highest z-index */
    position:absolute; 
    z-index:5000; 

    /* hide it by default */
    display:none;
}

#dialog-box .dialog-content {
    /* style the content */
    text-align:left; 
    padding:10px; 
    margin:13px;
    color:#666; 

}


/* extra styling */
#dialog-box .dialog-content p {
    font-weight:700; margin:0;
}

#dialog-box .dialog-content ul {
    margin:10px 0 10px 20px; 
    padding:0; 
    height:50px;
}

```

HTML:



```
<div id="dialog-overlay"></div>
<div id="dialog-box">
    <div class="dialog-content">
        <div id="dialog-message"></div>
        <a href="#" class="button-small">close</a>
    </div>
</div>

Scroll to end to see href, thanks.

test<br>
test<br>
test<br>
test<br>
test<br>
test<br>
test<br>
test<br>
test<br>
test<br>
test<br>
test<br>
test<br>
test<br>
test<br>
test<br>
test<br>
test<br>
test<br>
test<br>
test<br>
test<br>
test<br>
test<br>
test<br>
test<br>
test<br>
test<br>
test<br>
test<br>
test<br>
test<br>
test<br>
test<br>
test<br>
test<br>
test<br>
test<br>
test<br>
test<br>
test<br>
test<br>
test<br>
test<br>
test<br>
test<br>
test<br>
test<br>
test<br>
test<br>
test<br>
test<br>
test<br>
test<br>
test<br>
test<br>
test<br>
test<br>
test<br>
test<br>
test<br>
test<br>
test<br>
test<br>
test<br>
test<br>
test<br>
test<br>
test<br>
test<br>
test<br>
test<br>
test<br>
test<br>
test<br>
test<br>
test<br>
test<br>
test<br>
test<br>
test<br>
test<br>
test<br>
test<br>
test<br>
test<br>
test<br>
test<br>
test<br>
test<br>
test<br>
test<br>
test<br>
test<br>
test<br>
test<br>
test<br>
test<br>
test<br>
test<br>
test<br>
test<br>
test<br>
test<br>
test<br>
test<br>
test<br>
test<br>
test<br>
test<br>
test<br>
test<br>
test<br>
test<br>
test<br>
test<br>
test<br>
test<br>
test<br>
test<br>
 <a href="#" onclick="return popup('Please Log in');">This launches the popup, but the popup appears in the middle of the page, and not in view (at the current scroll)..</a>

```


[Position of popup window (center of view!, not center of page?)](/questions/31344845/position-of-popup-window-center-of-view-not-center-of-page)
=================================================================================================================================================



Use 



```
position: 'fixed'

```

to make the popup stick on the current view of the window.


Also change `href='#'` to `href` or remove it completely and make CSS link as this is what scrolls to the top of the page.


[THIS](http://jsfiddle.net/gyeo03nk/18/) opens it at current position of the scroller.


[THIS](http://jsfiddle.net/gyeo03nk/16/) shows how to open it on top of the page.




As in my comment. Use:



```
position: fixed;

```

for your dialogue-over lay. This should work for you.


