在 iframe 中动态定位 Bootbox

Question

我正在开发一个使用 iframe 显示所有内容的网站。这是一个巨大的痛苦，但此时此刻我无能为力。我在某个地方有一个功能可以根据内容调整 iframe 的大小。但是，当我调用引导框确认或警报时，它的定位基于 iframe 的滚动位置（我假设）。由于 iframe 始终与其内容一样高，因此它永远不需要滚动，因此引导框对话框始终出现在 iframe 的顶部。我可以像这样根据父框架的滚动位置成功定位对话框...

$(".modal-dialog").css("top",$(parent.window.document).scrollTop());

...但每次调用引导箱时我都必须这样做。我正在寻找更好的方法。

有没有办法通过 API 做到这一点？修改js文件？

编辑：我也使用 scrollTo 滚动到顶部，但这不是很优雅。

Answer 1

怎么样：

$("body").on("show", ".modal", function () {
  $(this).css("top",$(parent.window.document).scrollTop());
});

或者：

$("body").on("shown.bs.modal", ".modal", function() {
   $(this).find('div.modal-dialog').css("top",$(parent.window.document).scrollTop());
});

这样它应该会听到您使用的所有模态。

Answer 2

第二个选项有效。我遇到的唯一问题是当调用模态框时 window 没有向下滚动足够远，您可以看到它稍微滑入视图然后跳到所需位置。我添加了动画，所以它不那么刺耳。不过它并不完美，因为原始动画放慢了速度，然后我的动画接管了，所以它有点古怪。不过我可以忍受，所以谢谢你，Hackerman。

如果有人想找到更好的方法，请随意！

$("body").on("shown.bs.modal", ".modal", function() {
     $(this).find('div.modal-dialog').animate({top:$(parent.window.document).scrollTop()},200)
});

在 iframe 中动态定位 Bootbox

Position Bootbox dynamically inside iframe

jquery

iframe

positioning

bootbox