jQuery UI: How to use ui-widget-overlay by itself?

Question

I am trying to create an overlay, similar to the one that jQuery UI Dialog uses. I can create the overlay like this:

var $overlay = $(\'


        
      

Answer 1

This is an old question, but I stumbled on it and have since come up with a solution that seems simpler to me (tested in chrome/ie).

The following css class used in conjunction with jquery ui's ui-widget-overlay seems to do the trick:

.modalOverlay {
   position: fixed;
   width: 100%;
   height: 100%;
   z-index: 1001;
}

Tweak the z-index as necessary. By using fixed position and width/height set to 100%, you don't have to resize the overlay.

Note that ui-widget-overlay will override position to absolute, if you let it.

See it in action in this jsfiddle