javascript - 模态窗口在右侧略微移动

Question

我尝试将模式窗口置于浏览器窗口的中心(我正在 Firefox、Chrome 和 Opera 上进行测试)。

你可以点击这个link来测试它在中心的图像上再单击一次后:模态窗口应该会出现(它是空的，我将组件移到了这个模态窗口中)。

为了将模态窗口居中放置在浏览器窗口中，我做了:

// Width and Height of WebGL window : 90% of browser window width
var mainWidth = 0.9*$(window).width();
// Height deduced from starting image : 490/900 is the ratio of starting image, so I keep proportions.
// image
var mainHeight = mainWidth*(490/900);

之后:

  // Padding and Margin
  var paddingLeft = parseInt($('.popup_block').css('paddingLeft'));
  var paddingTop = parseInt($('.popup_block').css('paddingTop'));
  var borderLeft = parseInt($('.popup_block').css('borderLeftWidth'));
  var borderTop = parseInt($('.popup_block').css('borderTopWidth'));


  // Compute x and y limits for pop up
  var xPop = ($(window).width() - (mainWidth + paddingLeft + borderLeft))/2;
  var yPop = ($(window).height() - (mainHeight + paddingTop + borderTop))/2;

最后，我使用以下命令显示模态窗口:

// Make appear pop-up and add closing button
  $('#'+popID).fadeIn().css({'width': mainWidth, 'height': mainHeight, 'top': yPop, 'left': xPop}).prepend('<a href="#" class="close"><img src="./close_pop.png" class="btn_close" title="Close Window" alt="Close" /></a>');

  // Display background
  $('body').append('<div id="fade"></div>');
  // Working only for background
  $('#fade').css({'filter' : 'contrast(0.8)'}).fadeIn();

使用'#'+popID 模态窗口的jQuery id。

我需要有关右侧轻微偏移的帮助(右侧的空白空间比左侧的大):我是否忘记了要考虑的另一个参数(填充、边距、边框...)？

Answer 1

.popup_block 周围有完整的内边距和边框，但您只是获取左内边距/边框和顶部内边距/边框值，并使用它来使用 top 绝对定位元素 和 left 属性，因此元素实际上会在右侧/底部显示得有点宽，因为在定位元素时没有考虑右侧/底部填充/边框。

由于填充/边框四周是统一的，您可以将 paddingLeft、borderLeft、paddingTop、borderTop 值加倍。

var xPop = ($(window).width() - (mainWidth + (paddingLeft * 2) + (borderLeft * 2)))/2;
var yPop = ($(window).height() - (mainHeight + (paddingTop * 2) + (borderTop * 2)))/2;