Jquery Primefaces模态对话框位于IE中的媒体组件下方

我将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>

您的浏览器无法显示pdf，请单击下载pdf。
这是对话

---

注意：使用Primeface 3.5和JSF 2.1.13时，请尝试使用z-index属性，如style=“z-index:任何高于媒体z-index的值”。
如果您希望它应用于所有对话框，那么将css代码

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

---

希望这有帮助

我使用primefaces extensions中的documentviewer而不是primefaces中的媒体解决了这个问题

使用此选项：

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

#{text['error.documentviewer']}

相反，这是：

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

#{text['error.documentviewer']}

不，这没有用。您是否尝试将对话框的z索引设置为大于媒体的z索引。并且可以尝试将对话框放在媒体顶部。