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.
