Открыть модальное окно из iframe в родительский

Question

У меня есть страница с iframe, и внутри этого iframe есть несколько ссылок, которые должны открывать модальное окно в родительском окне. Дело в том, что у меня нет доступа для помещения кода в родительское окно. У меня просто есть доступ к этому iframe. Есть ли способ сделать это с помощью jquery с такими ограничениями?

Спасибо!

Answer 1

Вы можете использовать плагин JQuery SimpleModal

Есть опция под названием "appendTo", где вы можете указать, куда вы положили свой модал. Единственная проблема с этим подходом состоит в том, что наложение модала появляется с размером iframe, поэтому вы должны указать желаемую ширину и высоту после того, как откроете его.

$('#div-modal').modal({
    appendTo: $(window.parent.document).find('body'),
    overlayCss: {backgroundColor:"#333"}, // Optional overlay style
    overlayClose:true, 
});
// Set overlay's width
$(window.parent.document).find('#simplemodal-overlay').css('width', '100%');

Если div, который вы хотите открыть как модальный, находится в родительском окне, вы можете заменить $('#div-modal') с $(window.parent.document).find('#div-modal')

Answer 2

Потратьте 1 день, чтобы сначала открыть модальные окна из документа iframe, я сделал один случай:

parent.$("#you_modal_window_selector").css("visibility", "visible");

!!! изменение ключевого слова: PARENT. (строчными буквами)

Во-вторых, я меняю все кнопки в документе, включенном в iframe, с помощью скрипта:

<script> 
 $(function() {
        $(".open-modal").on("click", function (e) {
            var $this = $(this),
            $href = $this.attr("href");
            e.preventDefault();
            parent.$($href).css("visibility", "visible");
            parent.$(".modal-window-dark").css("visibility", "visible");
        });
    });
</script>