模态窗口在右侧略有偏移

Question

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

您可以通过单击此链接并在中心的图像上再单击一次后进行测试：应该会出现模式窗口（它是空的，我已将组件删除到此模式窗口中）。

要将模式窗口居中放置在浏览器窗口中，我这样做了：

// 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属性使用该值来绝对定位元素，因此该元素实际上将显示一点宽度在右侧/底部，因为在放置元素时未考虑右侧/底部的填充/边框。

由于padding / border在各处都是统一的，因此您可以将paddingLeft, borderLeft, paddingTop, borderTop值paddingLeft, borderLeft, paddingTop, borderTop 。

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