1

我目前在单击链接时会出现一个弹出框。我遇到的问题是链接大约在页面的一半处，当我单击链接时，覆盖高度不是 100%，并且该框出现在从页面顶部向下 80px 处。无论我制作什么尺寸的页面（与我的宽度一样），我都想以某种方式使框叠加高度为 100%（与我的宽度相同）并且有框，因此相对于我当时在页面上可以看到的内容，它距离屏幕顶部 80px而不是第一次加载页面时。

这是我目前的代码：

      //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 dialogLeft = (maskWidth/2) - ($('#dialog-box').width())/2; 

     // Set overlay to fill screen
     $("#dialog-overlay").css("width","100%").fadeIn();

     // Set dialogue box 80px from top and central
     $('#dialog-box').css({top:80, left:dialogLeft}).fadeIn();

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

     // Close button fades out overlay and message  
     $('.button').live('click',function()
     {
    $(this).parent().fadeOut();
    $('#dialog-overlay').fadeOut();
    return false;
     });

     window.onresize = function() {
     var maskWidth = $(window).width();
          var dialogLeft = (maskWidth/2) - ($('#dialog-box').width())/2; 
     $('#dialog-box').css({top:80, left:dialogLeft});
     }

 }

我为我所追求的效果编码的选项：

 //Popup about location box
 function popup(message) {

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

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

// Set overlay to fill screen
$("#dialog-overlay").css("width","100%").fadeIn();
$("#dialog-overlay").css("height",maskHeight).fadeIn();

// Set dialogue box 80px from top and central
$('html, body').animate({ scrollTop: 0 }, 500);
$('#dialog-box').css({top:80, left:dialogLeft}).delay(500).fadeIn();

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

// Close button fades out overlay and message   
$('.button').live('click',function()
{
    $(this).parent().fadeOut();
    $('#dialog-overlay').fadeOut();
    return false;
});

window.onresize = function() {
     var maskWidth = $(window).width();
     var dialogLeft = (maskWidth/2) - ($('#dialog-box').width())/2; 
     $('#dialog-box').css({top:80, left:dialogLeft});
}

 }
4

0 回答 0