Primefaces Modal Dialog位于IE中的Media组件下方

Question

我在一个页面中使用Primefaces p:dialog modal=true和p:media。
遇到 Internet Explorer （所有版本）的问题：

• 我p:dialog的模态未隐藏p:media和
• 当对话框显示时，我的p:dialog位于p:media组件的后面/下方。

请为此提供任何解决方案或JQuery解决方法。
这是代码和截图：

<div id="myPdfMedia">
  <p:media value="/resources/myfiles/primefaces_users_guide_3_5.pdf" width="500px" height="300px">  
    Your browser can't display pdf, <h:outputLink value="/resources/myfiles/primefaces_users_guide_3_5.pdf">click</h:outputLink> to download pdf instead.  
  </p:media>  
</div>

<p:commandButton onclick="dlg.show()" value="Dialog"/>

<p:dialog widgetVar="dlg" modal="true" appendToBody="true" width="200px" height="100px" header="My Dialog" >
    This is the dialog
</p:dialog>

注意：使用Primeface 3.5和JSF 2.1.13

Answer 1

我使用来自primefaces扩展的documentviewer而不是来自primefaces的媒体解决了这个问题。

使用此：

<pe:documentViewer locale="pt" height="#{previewHeight}" value="#{previewComponent.file}">
                        #{text['error.documentviewer']}
</pe:documentViewer>

而不是这个：

<p:media value="#{previewComponent.file}" height="#{previewHeight}" width="100%" player="pdf" cache="false">
                        #{text['error.documentviewer']}
</p:media>

Answer 2

尝试使用z-index属性，如style =“z-index：任何高于媒体z-index的值”。
如果您希望它适用于所有对话框，那么请输入像

这样的CSS代码

.ui-dialog{z-index:1005 !important;}  

希望这有帮助