Позиция Bootbox динамически внутри iframe

Question

Я работаю над сайтом, который использует iframe для отображения всего содержимого. Это огромная боль, но я ничего не могу с этим поделать на этом этапе. У меня есть функция где-то, которая изменяет размер iframe на основе содержимого. Однако, когда я вызываю подтверждение или оповещение bootbox, он основывает свое позиционирование на позиции прокрутки iframe (предположим). Так как iframe всегда высок, как его содержимое, он никогда не требует прокрутки, поэтому диалоги bootbox всегда появляются в верхней части iframe. Я могу успешно позиционировать диалоги на основе положения прокрутки родительского фрейма, как так ...

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

... но я должен делать это каждый раз, когда bootbox называется. Я ищу лучший способ.

Есть ли способ сделать это с помощью API? Изменить файл js?

EDIT: Я также использовал 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

Второй вариант работает. Единственная проблема, с которой я столкнулся, заключается в том, что окно не прокручивается достаточно далеко, когда вызывается модальный ящик, вы можете видеть, как он скользит в поле зрения, а затем перескакивает в нужную позицию. Я добавил анимацию, так что это не так. Это не идеально, хотя из-за того, что исходная анимация уменьшается, а затем моя анимация берет верх, так что это немного странно. Я могу жить с ним, хотя так спасибо, Хакерман.

Если кому-то хочется найти лучший способ, пожалуйста, не стесняйтесь!

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