CODEWITHSUNDEEP
jquery-ui
Boiler Bill
Boiler Bill

Reputation: 1940

Overlay covering up a JQuery UI 1.8.2 dialog

I am using a jQuery UI modal dialog on a JSF page that also has primefaces components inside the dialog div. When I set the modal property to true the overlay covers up the dialog content as well. Here is my dialog definition:

if (jQuery("#rangeChoice").val() == 'Custom') {       
  jQuery("#rangeDialog").dialog({
    modal: true,
    draggable: false,
    minHeight: 375, minWidth: 450,
    resizable: false,
    title: 'Create Custom Date Range',
    closeOnEscape: false,
    open: function(event, ui) { jQuery(".ui-dialog-titlebar-close").hide(); }
  });
return;
}

and my content for the div:

<div id="rangeDialog" style="display: none;">
<div class="customRangeButtons" style="z-index: 4999;">
    <!-- Clipped for brevity, the buttons alone are covered by the overlay -->
    <span>
        <p:commandButton value="Cancel" actionListener="#{bean.cancelCDR}" update="pGraphs"/>
    </span>
    <span style="margin-left: 300px;">
        <p:commandButton  value="Submit" type="submit" action="#{bean.saveCDR()}" update="pGraphs"/>
    </span>
</div>

I am using Primefaces 2.2.1, and I have a feeling related to who is controlling the overlay div. I did try adding my own overlay div in the page and showing it in the open event of a non modal dialog. It also covered the dialog for z-index values > 3. Values 1 and 2 were okay though some other controls on the page were above that. Note this is a workaround to using a p:dialog as it was causing my actionListeners not to fire.

What else can I try?

Upvotes: 3

Views: 2913

Answers (1)

Alexander Kahoun
Alexander Kahoun

Reputation: 2488

The problem is the z-index on the div tag is being overridden by the .dialog itself. The .dialog's default z-index is 1000. You can change this when you create the dialog by changing the zIndex option like so:

jQuery("#rangeDialog").dialog({
    modal: true,
    draggable: false,
    minHeight: 375, minWidth: 450,
    resizable: false,
    title: 'Create Custom Date Range',
    closeOnEscape: false,
    open: function(event, ui) { jQuery(".ui-dialog-titlebar-close").hide(); },
    zIndex: 4999
  });

See the options tab in the documentation for more info: http://jqueryui.com/demos/dialog/

Upvotes: 5

Related Questions