javascript - 弹出窗口的位置( View 中心!，而不是页面中心？)

Question

我有一个问题。如果页面真的很长.. 如何让弹出框出现在可见字段内？此刻它出现在页面中间，滚动条跳转到页面顶部？

我希望弹出窗口出现在滚动(在 View 中)的当前位置，甚至不更改当前滚动位置。向下滚动以查看链接和测试。

非常感谢。

代码: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>

Answer 1

使用

position: 'fixed'

使弹出窗口停留在窗口的当前 View 上。

同时将 href='#' 更改为 href 或完全删除它并制作 CSS 链接，因为这是滚动到页面顶部的内容。

THIS在滚动条的当前位置打开它。

THIS显示如何在页面顶部打开它。