Modal dialog over embedded object or iFrame (ugly solution)

Modal dialog over embedded object or iFrame (ugly solution)

I see that ticket # 4841 hasn't yet been addressed after 8 months.
http://dev.jqueryui.com/ticket/4841

An ugly solution for me was to hide the embedded object before invoking the dialog and showing it again after the dialog is closed.  Not the ideal solution, but certainly better than having parts of the dialog sandwiched between the parent page and the embedded object.

Embedded pdf:


Result of modal dialog:


Code as follows:
  1. <html>
    <head>
    <link rel="stylesheet" type="text/css" href="../css/custom-theme/jquery-ui-1.7.2.custom.css">
    <script type="text/javascript" src="../js/jquery-1.3.2.min.js"></script>
    <script type="text/javascript" src="../js/jquery-ui-1.7.2.custom.min.js"></script>
    <script type="text/javascript" src="../development-bundle/ui/ui.core.js"></script>
    <script type="text/javascript" src="../development-bundle/ui/ui.dialog.js"></script>
    <script type="text/javascript">
    // Generic dialog
    $(function() {
        $("#genericDialog").dialog({
            autoOpen: false,
            draggable: true,
            resizable: false,
            bgiframe: true,
            height: 140,
            width: 300,
            modal: true,
            closeText: '',
            buttons: {
                'OK': function() {
                    $(this).dialog('close');
                    $("#embeddedObject").show();
                }
            }
        });
    })

    function test() {
        $("#embeddedObject").hide();
        $("#genericDialog").dialog('open');
    }
    </script>
    <style>
    #embeddedObjectFrame {
        width: 400px;
        height: 300px;
        overflow: auto;
        border: 3px solid #004B7D;
    }
    </style>
    </head>
    <body>
    <?php
    echo "<div id=embeddedObjectFrame>";
        echo "<div id=embeddedObject>";
        if ($_GET['type'] == 'pdf') {
            // Embed PDF File
            echo "<object data='test.pdf' type='application/pdf' width=400 height=300>";
            echo "<a href='test.pdf'>pdf</a></object>";
         } else {
             // Embed empty.html
            echo "<object data='empty.html' type='text/html' width=400 height=300>";
            echo "<a href='empty.html'>pdf</a></object>";
         }
        echo "</div>";
    echo "</div>";

    echo "<br><input id=testButton type=button class=buttons value='Test' onClick='test()'>";

    // jquery dialog
    echo '<div id="genericDialog" title="Title here...">';
    echo '</div>';
    ?>
    </body>
    </html>