title: Primefaces dialog overlay not working
body: <p>Googled before posting. Did not found up-to-date information. Last problem recorded back in 2011, which suggested to use appendTo in the css considering the answer was based on the version of primefaces in 2011, I checking the documentation on the showcase and did not found anything regarding that. Made a blank .xhtml to check if something is wrong with primefaces or my code. Surprise, it works fine on the blank .xhtml just copied everything in the show case. (url: <a href="http://www.primefaces.org/showcase/ui/overlay/dialog/basic.xhtml" rel="nofollow">http://www.primefaces.org/showcase/ui/overlay/dialog/basic.xhtml</a> ) use the Modal example, you can find it at the end of the code. Simple copy paste does not seem to work. </p>
  
  <pre><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
  &lt;html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:p="http://primefaces.org/ui"&gt;
      &lt;h:head&gt;
          &lt;link href="css/imgareaselect-animated.css" rel="stylesheet"
          type="text/css" /&gt;
          &lt;link href="css/style.css" rel="stylesheet" type="text/css" /&gt;
          &lt;script type="text/javascript" src="scripts/jquery.min.js" /&gt;
          &lt;script type="text/javascript"
          src="scripts/jquery.imgareaselect.pack.js" /&gt;
          &lt;script type="text/javascript"&gt;
              function preview(img, selection)
              {   
                  if (!selection.width || !selection.height)
                      return;
  
                  $('#x1').val(selection.x1);
                  $('#y1').val(selection.y1);
                  $('#x2').val(selection.x2);
                  $('#y2').val(selection.y2);
                  $('#w').val(selection.width);
                  $('#h').val(selection.height);    
              }
  
              $(function ()
              {
                  $('#photo').imgAreaSelect(
                  {      
                      onSelectChange: preview
                  });
              });
  
              function teste() {
                  alert( document.getElementById('x1').value );
              }
          &lt;/script&gt;
      &lt;/h:head&gt;
      &lt;h:body&gt;
          &lt;div class="title"&gt;
              &lt;p:outputLabel&gt;Psiengine interactive office&lt;/p:outputLabel&gt;
          &lt;/div&gt;
          &lt;form action="index3.html" onsubmit="teste()" method="post"&gt;
              &lt;div&gt;
                  &lt;img id="photo" src="images/office.png" /&gt;
              &lt;/div&gt;
              &lt;div id="container"&gt;
                  &lt;table style="margin-top: 1em;"&gt;
                      &lt;thead&gt;
                          &lt;tr&gt;
                              &lt;th colspan="2" style="font-size: 110%; font-weight: bold; text-align: left; padding-left: 0.1em;"&gt;
                                  Coordinates
                              &lt;/th&gt;
                              &lt;th colspan="2" style="font-size: 110%; font-weight: bold; text-align: left; padding-left: 0.1em;"&gt;
                                  Dimensions
                              &lt;/th&gt;
                          &lt;/tr&gt;
                      &lt;/thead&gt;
                      &lt;tbody&gt;
                          &lt;tr&gt;
                              &lt;td style="width: 10%;"&gt;
                                  &lt;b&gt;X&lt;sub&gt;1&lt;/sub&gt;:
                                  &lt;/b&gt;
                              &lt;/td&gt;
                              &lt;td style="width: 30%;"&gt;&lt;input type="text" id="x1" value="-" /&gt;&lt;/td&gt;
                              &lt;td style="width: 20%;"&gt;&lt;b&gt;Width:&lt;/b&gt;&lt;/td&gt;
                              &lt;td&gt;&lt;input type="text" value="-" id="w" /&gt;&lt;/td&gt;
                          &lt;/tr&gt;
                      &lt;tr&gt;
                          &lt;td&gt;
                              &lt;b&gt;Y&lt;sub&gt;1&lt;/sub&gt;:
                              &lt;/b&gt;
                          &lt;/td&gt;
                          &lt;td&gt;&lt;input type="text" id="y1" value="-" /&gt;&lt;/td&gt;
                          &lt;td&gt;&lt;b&gt;Height:&lt;/b&gt;&lt;/td&gt;
                          &lt;td&gt;&lt;input type="text" id="h" value="-" /&gt;&lt;/td&gt;
                      &lt;/tr&gt;
                      &lt;tr&gt;
                          &lt;td&gt;
                              &lt;b&gt;X&lt;sub&gt;2&lt;/sub&gt;:
                              &lt;/b&gt;
                          &lt;/td&gt;
                          &lt;td&gt;&lt;input type="text" id="x2" value="-" /&gt;&lt;/td&gt;
                          &lt;td&gt;&lt;/td&gt;
                          &lt;td&gt;&lt;/td&gt;
                      &lt;/tr&gt;
                      &lt;tr&gt;
                          &lt;td&gt;
                              &lt;b&gt;Y&lt;sub&gt;2&lt;/sub&gt;:
                              &lt;/b&gt;
                          &lt;/td&gt;
                          &lt;td&gt;&lt;input type="text" id="y2" value="-" /&gt;&lt;/td&gt;
                          &lt;td&gt;&lt;/td&gt;
                          &lt;td&gt;&lt;/td&gt;
                      &lt;/tr&gt;
                      &lt;/tbody&gt;
                  &lt;/table&gt;
              &lt;/div&gt;
  
              &lt;h:panelGrid columns="1" cellpadding="5"&gt;
                  &lt;p:commandButton value="Modal" type="button" onclick="PF('dlg2').show();" /&gt;
              &lt;/h:panelGrid&gt;
  
              &lt;p:dialog header="Modal Dialog" widgetVar="dlg2" modal="true" height="100"&gt;
                  &lt;h:outputText value="This is a Modal Dialog." /&gt;
              &lt;/p:dialog&gt;   
          &lt;/form&gt;
      &lt;/h:body&gt;
  &lt;/html&gt;
  </code></pre>