JQuery Modal dialog without overlay

Question

I'm trying to show an "ajax loader dialog" that blocks the interface (modal) but has no overlay.

This is how I initialize the dialog:

  $("<div></div>").dialog({
         modal: true,
         dialogClass: "noOverlayDialog",
         autoOpen: false, //opened later
         ...
  });

I added the following CSS to hide the overlay :

.ui-dialog.noOverlayDialog + .ui-widget-overlay { opacity: 0 !important; }

However, when I call dialog("open") the overlay flashes then disappears, as if I had hidden it using Javascript. Same effect using display:none; or visibility:hidden.

To make sure it was the css removing the overlay and not something else, I removed the line of css and surely enough the overlay was now always visible.

Why is this happening? I thought static CSS should not have this kind of behavior and the overlay should be hidden immediately without a flash.

If I can't find an intuitive solution, perhaps an alternative would be to set modal option to false to prevent the overlay all together, and then write code to get the modal behavior. Either way, I need a working solution.

Answer 1

I got it to work on jsFiddle. Try this link

<div id="dialog">
    <h3>Here is the dialog content</h3>
    <p id="dialogContent"></p>
</div>
<button onclick="$('#dialog').dialog('open');">open</button>

<script>
    $(document).ready(function(){
        $('#dialog').dialog({
            title: 'My dialog',
            dialogClass: "noOverlayDialog",
            autoOpen:false,
            modal: true,
            open: function(event,ui){
                $('.noOverlayDialog').next('div').css( {'opacity':0.0} );
            }
        });
    });
</script>

Answer 2

The overlay used by jQuery has classui-widget-overlay. So Include the below css rule in your css,

.ui-widget-overlay {
    opacity: 0;
    filter: alpha(opacity=0);  /* IE8 and lower */
}

DEMO: http://jsfiddle.net/Lhwsq/

Note:

1. Make sure that this rule is included after jQuery css or any other plugin css.
2. This style will be applied to any dialogs in the same page.

To make it work on any specific dialog see https://stackoverflow.com/a/14586175/297641