How to open a jquery ui dialog box from an iframe on a click event

See more:

ASP

jQuery

jQuery-UI

I am trying to open a jquery ui dialog box from an iframe. When the button is clicked to open the dialog box, the dialog box is suppose to display over the iframe like a bootstrap modal.

The problem I am having is when I click a button to open the dialog box it opens the entire page of the other file inside the dialog box.

What I have tried:

myIframeFile.asp:

<iframe id="myiframe" src="myFileToOpenTheDialogBox.asp?a=<%=Request.QueryString("a")%>"></iframe>


myFileToOpenTheDialogBox.asp:


<button id="btnOptions">Options</button>

<div id="dialog" title="Options" style="display:none;">
<form>
...
</form>
</div>

<script>

$(document).ready(function(){
      $("#btnOptions").click(function(){
         $("#myiframe", window.parent.document).dialog({
            width:800,
            resizable: true
         });
      });
    });

</script>