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和{{绝对定位元素1}}属性，因此元素实际上会在右/底侧显示一点宽，因为在定位元素时没有考虑右/底填充/边框。

由于填充/边框在周围均匀，因此您可以将left值加倍。

paddingLeft, borderLeft, paddingTop, borderTop

模态窗口在右侧稍微移位

1 个答案: