Search code examples
jqueryiframepositioningbootbox

Position Bootbox dynamically inside iframe

I'm working on a site that uses an iframe to display all content. It's a huge pain but there's nothing I can do about it at this juncture. I have a function in place somewhere that resizes the iframe based on the content. When I call a bootbox confirm or alert, however, it bases its positioning on the scroll position of the iframe (I assume). Since the iframe is always as tall as its content, it never requires scrolling so the bootbox dialogs always appear at the top of the iframe. I can successfully position the dialogs based on the scroll position of the parent frame like so...

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

...but I have to do that every time a bootbox is called. I'm seeking a better way.

Is there a way to do this via the API? Modify the js file?

EDIT: I've also employed scrollTo to scroll to the top but that's not very elegant.

Solution

  • How about:

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

    Or:

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

    This way it should listen to all the modal you use.