Click here to Skip to main content
15,902,879 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
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
<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:-

HTML
<!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.

What I have tried:

I have tried everything i can thought but no success.
Posted
Comments
F-ES Sitecore 5-Aug-16 6:38am    
Is the parent page and the page in the iframe on the same site?
Coddddder 5-Aug-16 6:45am    
yes, both are in same site.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900