CODEWITHSUNDEEP
jqueryhtmliframe
filistea
filistea

Reputation: 422

open modal window from iframe into the parent

I have a page with an iframe, and inside this iframe are some links that should open a modal window in the parent window. The thing is I dont have access to put code into the parent window. I just have access to this iframe. Is there a way this could be done with jquery with such limitations?

Thank you!

Upvotes: 6

Views: 27344

Answers (2)

Maksim Goa
Maksim Goa

Reputation: 11

Spend 1 day to open modal windows from iframe document first i did single case :

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

!!! keyword changin matter is PARENT. (in small letters)

Second i change all buttons in iframe included document with script:

<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>

Upvotes: 0

Renato
Renato

Reputation: 525

You can use JQuery plugin SimpleModal

There's an option called "appendTo", where you can tell where do you put your Modal. The only problem with that approach is that the modal's overlay appear with iframe's size, so you must give it your desired width and height after you open it.

$('#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%');

If the div you want to open as a modal is in your parent window, you could replace $('#div-modal') with $(window.parent.document).find('#div-modal')

Upvotes: 8

Related Questions