title: Primefaces: If closing Dialog, background is deactivated with modal=true
body: <p>I am using <code>modal= true</code> and <code>appendToBody=true</code> in my Dialog, it works fine in Chrome and Firefox but not in IE8. The Dialog shows up, but if I close the Dialog the background is still blue, because of <code>modal=true</code>, but I have to use this.</p>
  
  <p>This is my code:</p>
  
  <pre><code>  &lt;ui:composition template="../templates/site.xhtml"
      xmlns="http://www.w3.org/1999/xhtml"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:p="http://primefaces.org/ui"
      xmlns:sec="http://www.springframework.org/security/tags"&gt;
  
      &lt;ui:define name="content"&gt;
  
          &lt;h:form id="form"&gt;
  
              &lt;p:commandButton value="Button" type="button" id="myButton"
                  onclick="form:testDialog.show()" /&gt;
  
  
  
          &lt;p:dialog id="testDialog" widgetVar="testDialog"
              header="My Test Dialog" modal="true" appendToBody="true"&gt;
              &lt;h:form&gt;
  
                  &lt;p:fieldset legend="Dialog"&gt;
                      &lt;p:spacer height="30" /&gt;
  
  
                  &lt;/p:fieldset&gt;
              &lt;/h:form&gt;
          &lt;/p:dialog&gt;
          &lt;/h:form&gt;
      &lt;/ui:define&gt;
  &lt;/ui:composition&gt;
  </code></pre>
  
  <p><strong>EDIT:</strong></p>
  
  <p>The problem was the naming of the dialog. The ID and widgetVar can not have the same name.
  Related to <a href="https://stackoverflow.com/questions/10579619/primefaces-3-component-id-and-widget-var-should-not-have-the-same-name">this post</a></p>