如何定位灯箱/ 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. 模态应该具有绝对位置 - 在示例中我将其置于内联

试一试：）