CODEWITHSUNDEEP
jqueryhtmliframepopupmodal-dialog
user3548416
user3548416

Reputation: 117

opening modal window from iFrame into parent window

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!

Upvotes: 4

Views: 35215

Answers (3)

Imran
Imran

Reputation: 2089

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();

}

Upvotes: 0

Vendhan Parthy
Vendhan Parthy

Reputation: 307

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

Upvotes: 4

SpYk3HH
SpYk3HH

Reputation: 22580

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>

Upvotes: 5

Related Questions