叠加图像不显示

这是一个JSF 2.0 + Primefaces 3.5应用程序。我有一个弹出对话框来确认删除选定的项目。一旦用户选择确认，JavaScript会生成2个div作为叠加层：一个是半透明层，另一个是旋转轮gif图像。一旦后端删除过程完成（这将需要几秒钟），页面被刷新并且覆盖图消失。叠加图像不显示

这里是我的对话框的代码，我用primefaces对话框标签：

<p:dialog id="confirmRemove" 
     header="Remove Confirmation" severity="alert" 
     widgetVar="confirmation" modal="true" resizable="false"> 
     <h:panelGrid columns="1"> 
      <h:panelGroup id="message"> 
       <h:outputText id="confirmMsg" 
        value="Are you sure you want to remove the selected item?" escape="false"/> 
      </h:panelGroup> 
      <p:commandButton id="confirm" value="Remove" 
       onclick="confirmation.hide();loadOverlay()" 
       actionListener="#{myBackingBean.addInfo()" ajax="false"/> 
     </h:panelGrid> 
    </p:dialog>

这里是我的javascript代码：

function loadOverlay() 
    { 
     var overlay = jQuery('<div id="overlay"d></div>'); 
     overlay.appendTo(document.body); 
     var overlay_img = jQuery('<div id="overlay_img"><img src="../images/spinning-wheel.gif"/></div>'); 
     overlay_img.appendTo(document.body); 
    }

这里是我的样式表：

#overlay { 
     position:fixed; 
     top: 0; 
     width: 100%; 
     height: 100%; 
     background-color: #000; 
     filter:alpha(opacity=50); 
     -moz-opacity: 0.5; 
     -khtml-opacity: 0.5; 
     opacity: 0.5; 
     z-index: 10000; 
    } 

    #overlay_img { 
     position: absolute; 
     top: 50%; 
     left: 50%; 
     opacity: 1.0 !important; 
     z-index: 10001; 
    }

我的问题是：点击确认对话框中的删除按钮后，将显示叠加层，但不显示图像。如果我在javascript函数loadoverlay（）的末尾添加了一个alert语句，那么该图像将显示。另外，如果我将p：commandButton ajax =“false”更改为ajax =“true”（默认模式），图像也会显示。但显然这不起作用，这意味着我必须手动刷新页面才能使覆盖层消失。我不认为它与Primefaces特别相关。我试图使用JSF标签h：commandButton，观察到同样的问题。

我只是想补充一点，如果我使用调试器（firebug）来浏览loadOverlay的原始代码，那么图像也会正常显示。

我还做了一个实验，在loadOverlay函数的末尾添加一个运行1秒的循环。如果我在没有调试器的情况下运行，在单击“删除”按钮后，页面会冻结一秒钟，然后继续部署覆盖（尽管没有图像）。但是如果我用调试器运行它，结果将在语句执行后立即显示在屏幕上。例如，在语句“overlay.appendTo（document.body）”之后，将立即部署覆盖。这让我觉得调试器是非常不可靠的：它似乎暗示调试器运行在不同于真实交易的流程上。

我一直在Firefox上测试我的代码（20.0）。我只是试图在IE浏览器（8），让我惊讶的是，它在IE浏览器上运行良好。所以这是浏览器的具体问题。

来源

2013-04-25 chaoshangfei

什么用[P：overlayPanel（http://www.primefaces.org/showcase/ui/overlayPanel.jsf） – 2013-04-25 15:45:27

好了，因为我的目的是阻止当前页面上的所有活动都使用半透明层，直到后端过程完成。 p：overlayPanel似乎不是真的为此目的（基于primefaces showcase）。我只关心自定义的级别，另一方面，这种JavaScript方式似乎更直接和直接。 – chaoshangfei 2013-04-25 16:39:00

我宁愿使用页面刷新来摆脱覆盖，因为它是一个更干净的解决方案。但是因为这对Firefox不起作用，所以我必须选择Ajax解决方案。对话框的代码更改为以下：

<p:dialog id="confirmRemove" 
    header="Remove Confirmation" severity="alert" 
    widgetVar="confirmation" modal="true" resizable="false"> 
    <h:panelGrid columns="1"> 
     <h:panelGroup id="message"> 
      <h:outputText id="confirmMsg" 
       value="Are you sure you want to remove the selected item?" escape="false"/> 
     </h:panelGroup> 
     <p:commandButton id="confirm" value="Remove" 
      onclick="confirmation.hide();loadOverlay()" 
      oncomplete="removeOverlay();" 
      actionListener="#{myBackingBean.addInfo()}" /> 
    </h:panelGrid> 
</p:dialog>

所以基本上改变号码：命令按钮来一个Ajax按钮，添加一个JavaScript函数（removeOverlay）去除覆盖，一旦过程完成。而removeOverlay函数为：

function removeOverlay() { 
    element = document.getElementById('overlay_img'); 
    element.parentNode.removeChild(element); 
    element = document.getElementById('overlay'); 
    element.parentNode.removeChild(element); 
}

来源

2013-04-26 23:49:17 chaoshangfei

叠加图像不显示

回答

相关问题