如何使用PrimeFaces DialogFramework实现多弹窗或为jQueryUI对话框加PF样式？

你之前调用showMessageDynamic出现内容覆盖，是因为该方法默认复用同一个动态消息弹窗实例，要展示多个独立弹窗改用openDynamic方法创建独立实例即可，如果需要用户逐一确认，可在前一个弹窗关闭后触发下一个，更符合需求。

首先需要在低版本PrimeFaces项目的faces-config.xml中添加DialogFramework配置（PF 10+版本可省略此步）：

<application>
  <action-listener>org.primefaces.application.DialogActionListener</action-listener>
  <navigation-handler>org.primefaces.application.DialogNavigationHandler</navigation-handler>
  <view-handler>org.primefaces.application.DialogViewHandler</view-handler>
</application>

Java端弹出多个独立弹窗的代码示例：

Map<String, Object> options = new HashMap<>();
options.put("modal", true);
options.put("width", 400);
options.put("height", 200);

// 弹出第一条消息
PrimeFaces.current().dialog().openDynamic("messageView", options, Collections.singletonMap("content", "message-1"));
// 弹出第二条独立消息
PrimeFaces.current().dialog().openDynamic("messageView", options, Collections.singletonMap("content", "message-2"));

新增一个简单的messageView.xhtml作为弹窗内容页：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:p="http://primefaces.org/ui">
<h:body>
  <p:outputLabel value="#{content}" />
  <p:button value="确认" onclick="PF('dlg').hide();" style="margin-top: 1rem;"/>
</h:body>
</html>

如果需要实现用户确认完一条才弹出下一条，可在确认按钮上添加关闭回调，后端收到回调后再触发下一条消息的弹窗即可。

PrimeFaces本身基于jQueryUI封装组件，两者的样式类高度兼容，只需要给弹窗和按钮手动添加PF的主题类即可复用现有PF样式，修改后的代码如下：

function showDialog(id, title, content) {
  var dialog = document.createElement("div");
  dialog.id = id;
  dialog.title = title;
  dialog.innerHTML = content;
  document.body.appendChild(dialog);
  $("#" + id).dialog({
    modal: true,
    dialogClass: "ui-widget ui-corner-all ui-shadow", // 添加PF弹窗通用样式类
    buttons: {
      Ok: function() {
        $(this).dialog( "close" );
      }
    },
    open: function() {
      // 给弹窗按钮添加PF按钮样式
      $(this).parent().find(".ui-dialog-buttonpane button")
        .addClass("ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only");
    }
  });
}

$(function() {
  showDialog("dialog-1", "Message-1", "message-1");
  showDialog("dialog-2", "Message-2", "message-2");
});

修改后jQueryUI弹窗的样式会和PF默认弹窗样式完全一致，不需要额外引入样式文件。

内容的提问来源于stack exchange，提问作者sweintritt