display modal box on top of the entire page, not only inside the iframe page

[lambing]

Hi guys, I have a page and inside that page I have an iframe which occupies 60% of the page. Now inside this iframe, I have a button that when i click it, it opens up a modal box. I am currently using jquery ui modal dialog, could anyone help me findout how to display the modal dialog on top of the entire page not only inside the iframe. What happens on the current application I have, when I open up my modal dialog, it only covers the iframe page.

so here is my code:

showModal: function() {var modal = j(i+modalDownloadProfId);
            modal.show();
            modal.dialog('destroy');
            modal.dialog({
                modal: true,
                resizable: false,
                draggable: false,
                width: 380,
                closeOnEscape: true,
                title: 'Request My Download',
                position: 'top',
                beforeClose: function() {
                    if (pendingStatus === true) {
                        j(i+learnmoreId).hide();
                        j(i+pendingBtnId).css({'cssText':'display:block !important'});
                    }
                }
            });}

Here is the code that triggers that function

jQuery("#btnID").click(this.showModal);

Thanks,
-lambing