javascript - Position of popup window (center of view!, not center of page?) - Stack Overflow

admin管理员组

文章数量:1287838

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: /

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>

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/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>

• javascript
• jquery
• html
• css

Share Improve this question Follow asked Jul 10, 2015 at 15:37 Dave FrosterDave Froster 5511 silver badge55 bronze badges 2

• 2 Have you tried changing the diaglouge-over lay to postion: fixed; ? I'm not sure if this is your solution, but it may help. – Becky Commented Jul 10, 2015 at 16:31
• Thanks Becky, that seems to be the way to do it. – Dave Froster Commented Jul 10, 2015 at 17:29

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 8

Use

position: 'fixed'

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

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

THIS opens it at current position of the scroller.

THIS shows how to open it on top of the page.

As in my ment. Use:

position: fixed;

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

本文标签： javascriptPosition of popup window (center of viewnot center of page)Stack Overflow