opening modal window from iFrame into parent window

4
votes

I need some help appending a modal from an iFrame to it's parent body. I've heard about the jQuery plugin SimpleModal and even tried it, but failed.

So I have a page with an iFrame and inside this iFrame there is a button that should open a modal window in the parent window. The problem is that I don't have access to put code into the parent window. I just have access to the iFrame.

For any kind of help, I'm very thankful!

3
jqueryhtmliframepopupmodal-dialog
If you don't have access to parent window (cross domain iframe???), you cannot afaik. If you could, this would be a major security issue as i can imagine it. That's said, you could proxify server side the parent window but i'm quite sure this isn't what you are looking for - A. Wolff
@A.Wolff but, if he is on the same domain, as I imagine it would be in such instance, he can make use of window.frameElement. as noted below, I've had to do exactly this - SpYk3HH

3 Answers

5
votes

Without any example code, it's kinda hard to show you per your exact layout, but I can give you an example of how I've achieved this. Keep in mind, everything must be on the same domain, which I would assume it is.

I had to do this for a CRM I've developed and here's an example of how I did it:

parent HTML

<body>
    <div id="myModal">stuff</div>

parent JS

<script>
    $(function() {
        $('#myModal').someDialogPlug({ some: options });
    })
</script>

iFrame HTML

<button id="btnPopModal">click me</button>

iFrame JS

<script>
    $(function() {
        $('#btnPopModal').on('click', function(e) {
            //  here's the fun part, pay attention!
            var $body = $(window.frameElement).parents('body'),
                dlg = $body.find('#myModal');
            dlg.someDialogPlugin('open');
        });
    })
</script>
2
votes

Let me explain with my code for this scenario,

Parent HTML

<div id="CatModal" class="modal fade" role="dialog">

<div class="modal-dialog ">

    <!-- Modal content-->
    <div class="modal-content">

        <div class="modal-body">

        </div>

    </div>

</div>

iframe HTML

<button id="btnPopModal">click me</button>

iframe JS

window.parent.$('#CatModal').modal('show');

change the content of modal-body by

window.parent.$('.modal-body').html('content stuff');

Issue Discussion in GitHub

0
votes

window.parent.show_messageNew(title, content);

function show_messageNew(title, content)
{
    $('#myModal_Title').html(title);
    $('#myModal_Content').html(content);
    $('#myModal_Message').modal().css(
            {
                'margin-top': function () {
                    //var offss = $(this).height() - window.parent.scrollY;
                    var offss = window.parent.scrollY;
                    console.log(offss);
                    return offss;
                }
            });
    //debugger;
    $('#myModal_Message', window.parent).modal();

}