jQuery: open a widescreen dialog (in top.document) from any nested iframe/frame

A problem that I had some days ago was to open a  dialog with jQuery from a nested iframe but using all the document's width/height. If the dialog is inside of the iframe, the modal view (and the position ) depends just about the iframe scope.

Indeed, every time that you execute a line like  $("#dialogDiv").dialog(), the init will set the parameters about the position  and dimentions of the caller object, i.e., if do you want to make a dialog() call from a iframe/frame that just have a few pixels (or just don't have them), the dialog window will not see ok.


One possible solution is to define a dialog div (with id=dialogDiv) in the top.document file. But we can not activate the dialog from the iframe/frame. To solve this, we need add a javascript code like this in the top.document file:

<script type="text/javascript">
var top.window.docDialog=null;
$(document).ready( function() {
$("#main",top.document).prepend("<div id='dialog' title=''></div>");
top.window.docDialog=$("#dialog");
top.window.docDialog.dialog({
bgiframe: true,
minHeight: 30,
minWidth: 200,
height: 100,
width: 250,
autoOpen: false,
modal: true
});
});
</script>

Where the code is adding a div (id=dialog) inside of another existing div (id=main). Then you assign the jQuery object to a variable of the top.window. Thus, we can locate the docDialog variable from any iframe/frame, allowing us to interact with the dialog div defined.


In this hand, if assume that in the nested iframe/frame an error occurs and want to activate the message (dialog), just use a code like this:

<script type="text/javascript">
top.window.docDialog
.html("<div style='font-size:14px;paddig:0;margin:0;color:#FF1111;'><center>No se puede Ingresar en este momento</center></div>")
.dialog('option', 'title', 'ERROR')
.dialog('open');
</script>

Note that the top.window.docDialog object is a jQuery object. Also, this works with Internet Explorer and FireFox.