open a modal window from iframe into the parent window

Question

I am trying to open a modal dialog in parent page from iframe (Button to open a modal dialog is in iframe but modal div is in parent page). But no success.

I have a parent page like below:-

        <html xmlns="http://www.w3.org/1999/xhtml">
        <head>
            <title></title>
            <script src="basic.js"></script>
            <script src="jquery.simplemodal.js"></script>
        </head>
        <body>
            <iframe src="Frame-1.html" width="400" height="400"></iframe>
            <iframe src="Frame-2.html" width="400" height="400"></iframe>

            <div id="modalPopup" class="modal fade" tabindex="-1" role="dialog" aria-hidden="true">
                <div class="modal-dialog">
                    <div class="modal-content">
                    </div>
                </div>
            </div>
        </body>
        </html>

And code in Frame-1.html is like below:-

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <title>Modal popup</title>
        <link rel="stylesheet" href="./bootstrap.min.css" />
        <script src="./jquery-1.11.1.min.js" type="text/javascript"></script>
        <script src="./bootstrap.min.js" type="text/javascript"></script>
        <script src="basic.js"></script>
        <script src="jquery.simplemodal.js"></script>
        <script>
            $(document).on('hide.bs.modal', '#modalPopup', function () {
                alert('');
                //Do stuff here
            });

            //alert($(window.parent.document).find('#modalPopup').modal);

            $(window.parent.document).find('#modalPopup').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%');
        </script>
    </head>
    <body>
            <button type="button" class="btn" name="btn" id="btn" data-target="#modalPopup"
                    data-toggle="modal" data-backdrop="static" data-keyboard="false" href="./Popup.html">
                Click ME!
            </button>
    </body>
    </html>

Please help me. Any help is appreciable. Thanks in advance.

Your question has been asked and answered before: http://stackoverflow.com/a/951987/6681296 — JBartus, Aug 05 '16 at 09:38
Sorry but i am not able to resolve my problem after reading your shared link. — Coddder, Aug 05 '16 at 10:30

Mateusz Klimentowicz · Answer 1 · 2016-08-05T10:44:11.237

0

I become this error when I test(localy not on server) your code:

"Uncaught SecurityError: Blocked a frame with origin "null" from accessing a frame with origin "null". Protocols, domains, and ports must match."

Maybe this will help you.

edited Aug 05 '16 at 10:44

answered Aug 05 '16 at 09:44

Mateusz Klimentowicz

659
6
23

I don't know how but i am not getting such type of error while running above code. – Coddder Aug 05 '16 at 10:29
@Codder you are right. I think it´s because I was running it localy now I put it on my server and it worked properly – Mateusz Klimentowicz Aug 05 '16 at 10:43
@Codder I think this will help you: http://stackoverflow.com/questions/15249678/close-bootstrap-modal-from-inside-iframe – Mateusz Klimentowicz Aug 05 '16 at 11:00

open a modal window from iframe into the parent window

1 Answers1