Question

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

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

...但每次调用bootbox时我都必须这样做。我正在寻求一种更好的方式。

有没有办法通过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

第二种选择有效。我遇到的唯一问题是当调用模态框时窗口没有向下滚动得足够远，你可以看到它滑入视图中然后跳到所需的位置。我添加了动画，所以它不是那么刺耳。它并不完美，因为原始动画缓和了，然后我的动画接管了所以它有点隐蔽。我可以忍受它，谢谢你，Hackerman。

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

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

在iframe中动态定位Bootbox

2 个答案: