Question

我在点击链接时会出现一个弹出框。我遇到的问题是链接大约是页面的一半，当我点击链接时，覆盖高度不是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});
     }

 }

选项I为我之后的效果编码：

 //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});
}

 }

jQuery弹出框高度相对于页面位置的定位

0 个答案: