如何关闭 Liferay 中的弹出窗口？答案

【问题标题】：How to close a popup window in Liferay?如何关闭 Liferay 中的弹出窗口？
【发布时间】：2012-10-05 08:31:14
【问题描述】：

我使用以下代码在弹出窗口上加载 WebContent 编辑 portlet：

<liferay-ui:icon
    image="edit"
    label="true"
    message="news-edit-url"
    url="${oneNews.newsEditUrl}"
    />

editUrl:

taglibEditURL = "javascript:Liferay.Util.openWindow({dialog: {width: 960}," + 
    "id: '" + renderResponse.getNamespace() + "'," +
    "title: '" + LanguageUtil.format(request.getLocale(), "edit-x", HtmlUtil.escape(assetRenderer.getTitle(request.getLocale()))) + "'," +
    "uri:'" + HtmlUtil.escapeURL(editPortletURLString) + "'});";

当内容被保存或发布时，portlet 被加载到弹出窗口中。我希望关闭弹出窗口并刷新带有 editURL 链接的 portlet。

有关此的任何帮助...

【问题讨论】：

标签： popup liferay liferay-6

【解决方案1】：

这是关闭弹出窗口的代码，它应该存在于打开弹出窗口的父页面中：

Liferay 6.1 版

Liferay.provide(
        window,
        '<portlet:namespace />closePopup',
        function(popupIdToClose) {

            var A = AUI();

            A.DialogManager.closeByChild('#' + popupIdToClose);
        },
        ['aui-base','aui-dialog','aui-dialog-iframe']
    );

Liferay 6.2 版

Liferay.provide(
    window,
    '<portlet:namespace/>closePopup',
        function(popupIdToClose) {

            var popupDialog = Liferay.Util.Window.getById(popupIdToClose);

            popupDialog.destroy();
        },
        ['liferay-util-window']
    );

这是刷新打开弹出窗口的 portlet 的代码。这应该出现在打开弹出窗口的父页面中：

Liferay.provide(
        window,
        '<portlet:namespace />refreshPortlet',
        function() {

            <%-- refreshing the portlet [Liferay.Util.getOpener().] --%>
            var curPortletBoundaryId = '#p_p_id<portlet:namespace />';

            Liferay.Portlet.refresh(curPortletBoundaryId);
        },
        ['aui-dialog','aui-dialog-iframe']
    );

如何调用closePopup 和refreshPortlet 函数由您决定。一种方法是您可以让弹出窗口刷新并仅在成功处理请求时从弹出窗口本身调用closePopup函数，然后也从弹出窗口调用refreshPortlet函数。

这是一个代码-sn-p，它可以帮助您从弹出窗口中调用父页面函数：

Liferay.Util.getOpener().<portlet:namespace />closePopup(popupIdToClose);
Liferay.Util.getOpener().<portlet:namespace />refreshPortlet();

popupIdToClose 与打开弹窗时使用的id 相同，如图所示：

taglibEditURL = "javascript:"
                +   Liferay.Util.openWindow({"
                +       "dialog: {width: 960},"
                +       "id: '" + renderResponse.getNamespace() + "'," // This is the "popupIdToClose"
                +       "title: '" + LanguageUtil.format(request.getLocale(), "edit-x", HtmlUtil.escape(assetRenderer.getTitle(request.getLocale()))) + "',"
                +       "uri:'" + HtmlUtil.escapeURL(editPortletURLString)
                +       "'}"
                +   ");";

希望这会有所帮助。

【讨论】：

感谢您的回答。您能否解释一下，我如何在 /html/portlet/journal/edit_article.jsp 中调用这些方法。我从我的portlet 调用这个jsp 来编辑然后发布新闻文章。我不明白，我怎样才能得到 popupIdToClose...
我尝试调用函数： AUI().use('event', 'node', function(A) { A.one(publishButton) .on(' click', function(e){ Liferay.Util.getOpener().closePopup(''); }); });
感谢您的帮助。我尝试调用函数： AUI().use('event', 'node', function(A) { A.one(publishButton) .on('click', function(e){ Liferay.Util.getOpener() .closePopup(''); }); });我看到错误： Liferay.Util.getOpener().closePopup('') 不是函数。我的代码有什么问题？
其中一个或两个都可能有两个问题：1) 如果您已将函数声明为<portlet:namespace />closePopup 并调用为Liferay.Util.getOpener().closePopup，则语法不正确，因此呼叫应该是这样的Liferay.Util.getOpener().<portlet:namespace />closePopup。 2）另外这个调用Liferay.Util.getOpener()是调用父页面的函数，检查函数closePopup是在弹窗中声明还是在父页面中声明。
closePopup 在父页面中声明。 Hier 是我的声明： Liferay.provide( window, 'closePopup', function(popupIdToClose) {... 而hier 是我的调用 Liferay.Util.getOpener().closePopup( ''); 函数调用后：TypeError: Liferay.Util.getOpener()._15_closePopup is not a function

【解决方案2】：

AUI taglib 6.2 版本的解决方案。无需额外的 JS。

<aui:button cssClass="close-panel" type="cancel" value="close" />

重要的部分是cssClass="close-panel"。

【讨论】：