Closing a jquery modal dialog from a remote page

Question

I'm using the jQuery-UI dialog widget in a Grails-based application to load a remote page (in this case, a simple file upload form). The remote page is defined elsewhere in my project, and doesn't know it is being loaded in a dialog.

Is there any way to close the dialog via a link in the remote page? Would I have to somehow pass a reference to the dialog when I load the page, or is there a way to trigger the close event while remaining agnostic of the dialog itself?

Answer 1

Try this HTML:

<a href="#" id="btnDone">CLOSE</a>

and this JavaScript:

$("#btnDone").click(function (e) {
e.preventDefault();
var dialogDiv = $("#btnDone").parents(".ui-dialog-content");
if (dialogDiv.length > 0) {
dialogDiv.dialog('close');
}
});

in your remote page. It will look to see if it is inside a dialog and if so, it will close it. If not, it will do nothing.

Answer 2

如果给对话框一个已知的ID，则可以使用jquery查找它（例如$（'＃mydialog'），然后通过远程页面上的脚本将其关闭。唯一的问题可能是当远程页面为JS时要评估JS。加载到对话框中。