如何定位灯箱/div 弹出窗口，使其位于 iframe 中视口的中心

Question

如何定位灯箱/div 弹出窗口，使其位于 iframe 中视口的中心。

iframe 嵌入到来自不同域的 HTML 中。

Answer 1

以下所有更改均涉及 iframe 中加载的页面。

首先，将 div 添加到文档正文的底部。

var body = $('body')[0];
$(body).append("<div id='modal' style='position:absolute;display:none;'></div>");

然后，当您想要使用模态时，运行以下代码（在函数内）：

// to position it, do the following
var body = $('body')[0];

// get the position and size info on the iframe
var height = $(body).height();
var width = $(body).width();

// get the size information on the modal div
var divHeight = $('#modal').height();
var divWidth = $('#modal').width();

// put it together to get the proper position
var top = (height/2)-(divHeight/2);
var left = (width/2)-(divWidth/2);

// set it and we're done, hiya!
$('#modal').css('top', top);
$('#modal').css('left', left);

// show the div
$('#modal').css('display', 'block');

注意两件事

1. 您应该将模态 div 添加到 body 元素以使生活更轻松
2. 模态应该具有以下位置：绝对 - 在示例中我将其内嵌

试一试:)