Modal Dialog Box with Facebook app shows only over iframe

I am trying to show jquery-ui modal dialog box in my iframe facebook app, but it disables the iframe area within the facebook app i.e. it is modal only for the iframe and I can click other facebook elements outside of iframe. What I want instead is to disable the entire page then just the iframe.

The version of jquery used is 1.5.1, jquery-ui is 1.8.10 and the code is

html

<div id="dialog-message" title="Download complete">
    <p>
      <开发者_如何学Python;span class="ui-icon ui-icon-circle-check" style="float:left; margin:0 7px 50px 0;"></span>
    Your files have downloaded successfully into the My Downloads folder.
   </p>
   <p>
      Currently using <b>36% of your storage space</b>.
   </p>
</div>

javascript:

<script>
  $(function() {

         $( "#dialog-message" ).dialog({
                 modal: true,
                 buttons: {
                      Ok: function() {
                      $( this ).dialog( "close" );
                 }
              }
          });
  });
</script>

Any help is appreciated, Thanks,

---

Since your app resides in the iFrame you cannot take control over the parent iframe since it lives on a separate domain. I your app requirements dictate you must put your dialog over everything, then I would suggest you change from use a canvas app and build a web site app instead. Very easy to do, I have a few of them running in production.