如何更改jsf primefaces中确认框的位置？

Question

我在JSF中使用primefaces确认框。对话框在页面末尾弹出，但我想让它弹出页面的中心。 在浏览器中检查检查元素时我得到的html代码下面显示默认情况下的dilog框已定义内联CSS。我试图给它的类提供css，但它没有用。

JSF代码：

<p:confirmDialog message= "Do you want to save your changes?"   showEffect="fade" widgetVar="Confirm" position="center"> 

<p:commandButton value="Yes" action="#{emdNew.save}" oncomplete="PF('Confirm').hide()" update=":form"/>

<p:commandButton value="No"  update="@form"  immediate="true" action="#{emdNew.no}" oncomplete="PF('Confirm').hide()" /> 

</p:confirmDialog>

有人请帮忙。提前谢谢。

Answer 1

您可以使用appendTo - 属性来定义<p:confirmDialog>应居中的元素。我会尝试使用以下值：

<p:confirmDialog appendTo="body" ...></p:confirmDialog>

另一种方法是覆盖.ui-dialog类的默认样式：

.ui-class {
   top: 50%;
   left: 50%;
}

小心在默认的PrimeFaces CSS之后包含自定义样式表。

我无法测试此atm，但我希望这可以帮助您解决问题。请查看docs以获取更多信息。

Answer 2

如果您使用confirmDialog格式，则需要这样写；

/*This code for dialog component*/

#formID\:dialogID {
  left: 5% !important;
  top: 15% !important;
}

/*This code for confirmDialog component*/

.ui-dialog {
  left: 5% !important;
  top: 15% !important;
}

但请小心使用.ui-dialog。