jQuery modal dialog is hidden by overlay div if dialog's parent has fixed position

jQuery modal dialog is hidden by overlay div if dialog's parent has fixed position

One of my jQuery dialogs is defined within a div that has a fixed position (footer of page). When a modal jQuery dialog is opened jQuery creates an overlay div that hides the whole page and then puts the dialog to be opened on top having a higher z-index than the overlay div. Unfortunately any dialog that is rendered within a div with fixed position is overlayed by the overlay div although the modal dialog to be opened got a greater z-index then the overlay itself.

The following HTML code that I reduced for demonstration purposes to the problem shows the difference between a dialog within a non fixed position div and within a fixed position div:

  1. <?xml version="1.0" encoding="UTF-8"?>
  2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml">
  4. <head>
  5.     <link type="text/css" rel="stylesheet" href="/demo-webapp/faces/javax.faces.resource/themes/sam/theme.css?ln=primefaces&amp;amp;v=2.2.1" />
  6.     <link type="text/css" rel="stylesheet" href="/demo-webapp/faces/javax.faces.resource/jquery/ui/jquery-ui.css?ln=primefaces&amp;v=2.2.1" />
  7.     <title>CSS TEST</title>
  8.     <script type="text/javascript" src="/demo-webapp/faces/javax.faces.resource/jquery/jquery.js?ln=primefaces&amp;v=2.2.1" />
  9.     <script type="text/javascript" src="/demo-webapp/faces/javax.faces.resource/jquery/ui/jquery-ui.js?ln=primefaces&amp;v=2.2.1" />
  10.     <script>
  11.     /*<![CDATA[*/
  12.         jQuery(function() {
  13.             jQuery("#dialog1").dialog({
  14.                 autoOpen: false,
  15.                 modal: true
  16.             });
  17.             jQuery("#dialog2").dialog({
  18.                 autoOpen: false,
  19.                 modal: true
  20.             });
  21.         });
  22.     /*]]>*/
  23.     </script>
  24. </head>
  25. <body>
  26.     <div style="z-index: 1; position: static;" onclick="jQuery('#dialog1').dialog('open')">
  27.         position: static; /* default */
  28.         <div id="dialog1" title="Dialog1"></div>
  29.     </div>
  30.     <div style="z-index: 1; position: fixed; left: 100px; top: 100px" onclick="jQuery('#dialog2').dialog('open')">
  31.         position: fixed;
  32.         <div id="dialog2" title="Dialog2"></div>
  33.     </div>
  34. </body>
  35. </html>

After loading the page it appears like that:

Dialog within a normal div is shown correctly

The first dialog is defined with a non fixed positioned div and the dialog appears normally:



Dialog within a fixed positioned div is overlayed

Note, that when the second dialog defined within a fixed positioned div is shown, it cannot be clicked by the user since it is overlayed by the overlay div:

Second dialog does not appear correctly

Please not that z-index of the overlay div is in both cases 1001 and the z-index of the dialog is 1002. So the overlay div should not overlay the dialog, but unfortunately it's the case for dialogs within a fixed position div.

Since I am using Primefaces I am bound to jQuery 1.4.4. The problem occures in Firefox 4, latest Release and Safari, latest Release.

Can you reconstruct this issue and do you have a solution for that? Please note that I don't want to to place the dialog outside of the fixed positioned div although it would solve the issue. The reason for that is that I am using the templating mechanism of JSF and therefore the footer of my page will be filled dynamically with content -- in this case a popup dialog. It would break modularity if I have to place the dialog somewhere else.