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

var overlay = $('<div class="ui-overlay"  style="position: absolute; top: 0pt; left: 0pt; display: inline-block; overflow: hidden;"><div class="ui-widget-overlay" style="top: 0pt; left: 0pt;"></div></div>').hide().appendTo($('body'));
$(overlay).width('100%');
$(overlay).height('100%');
$(overlay).fadeIn();

Answer 2

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

Answer 3

I know this is too late to give answer for this question but simpler way to add this two function

open: function() {
     $('.ui-widget-overlay').css('position', 'fixed');
      },
close: function() {
      $('.ui-widget-overlay').css('position', 'absolute');   
      } ,