从 Primefaces 对话框中删除标题答案

【问题标题】：Remove header from Primefaces Dialog从 Primefaces 对话框中删除标题
【发布时间】：2017-11-09 10:29:35
【问题描述】：

有没有办法从使用 Primefaces 对话框框架打开的对话框中删除标题？我知道我可以设置自定义标头（请参阅代码片段），但是如何将其删除？我不想从所有对话框中删除它，因此不能选择覆盖 CSS 类 .ui-dialog .ui-dialog-titlebar。

 Map<String,Object> options = new HashMap<String, Object>();
        options.put("modal", true);
        options.put("width", 640);
        options.put("height", 340);
        options.put("contentWidth", "100%");
        options.put("contentHeight", "100%");
        options.put("headerElement", "customheader");

        RequestContext.getCurrentInstance().openDialog("viewCars", options, null);

【问题讨论】：

你知道你可以添加一个 css 类并使用它从一个对话框中删除它
嗯，但是如何添加呢？我已经尝试直接在 xhtml 页面中包含一个 css 规则，覆盖 .ui-dialog .ui-dialog-titlebar 并使用 display:none 但它不起作用。我尝试在 javascript-ready 函数中添加 css 属性，但它也不起作用。

标签： css primefaces dialog

【解决方案1】：

您可以在 jQuery 的 Class Selector 的帮助下完成。

在要显示对话框的页面内添加以下 java 脚本

        <script type="text/javascript">
            function removeDialogHeader(xhr, status, args){
                var showHeader=args.showDialogHeader;
                if (!showHeader){
                    //jquery gets all elements with class name ui-dialog-titlebar
                    var elements= $(".ui-dialog-titlebar");
                    //to remove elements
                    elements.remove();
                    //or you can achive the same effect by inserting display:none into element style
                    //elements.css("display", "none");
                }
            }
        </script>

修改托管 bean 方法以使标头可见性可配置

public void viewCars() {
    Map<String,Object> options = new HashMap<String, Object>();
    options.put("resizable", false);
    //...
    RequestContext.getCurrentInstance().openDialog("viewCars", options, null);
    RequestContext.getCurrentInstance().addCallbackParam("showDialogHeader", false);
}

并且，假设你有 p:commandButton 来显示对话框，在 Ajax 完成后调用 JS 函数

<p:commandButton value="Show dialog" actionListener="#{testBean.viewCars()}" oncomplete="removeDialogHeader(xhr, status, args);"/>

【讨论】：

这很酷，谢谢。注意：我必须将 javascript 插入“基本”页面，即按钮所在的页面。
@Zardo 并且“基本”页面是“您要显示对话框的页面”，正如我试图用我的“泰山文字”描述的那样：)。你的描述比我的好多了。是的，这是您的按钮所在的页面。

【解决方案2】：

以防万一有人偶然发现同样的问题。您可以简单地在您的页面中覆盖：

.ui-dialog-titlebar{
display:none;
}

【讨论】：

实际上这不是问题的答案;-)

【解决方案3】：

“删除标题”是什么意思？可能是“不显示标题”？如果是这样，您可以定义一个 css 类，如：

.dialog-no-header.ui-dialog .ui-dialog-titlebar {
    display: none;
}

并在目标对话框中使用它：

<p:dialog class="dialog-no-header" ...

【讨论】：

不，你不能，不是使用对话框框架操作
@Kukeltje 你是对的。今天晚些时候我会检查它，谢谢！