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 = $('<div class="ui-widget-overlay"></div>').hide().appendTo('body');

//...later in my script
$overlay.fadeIn();

But the overlay cuts off when I scroll down. I noticed that jQuery UI is setting the width and height on that div dynamically. So I would like to reuse this functionality instead of reinventing the wheel. How can I create an overlay like this, or reuse the one in jQuery UI?

Solution:

Set the width/height of the overlay to be the width/height of the document, then bind a function on the window resize event to adjust the overlay width/height to match the new document width/height:

$(document).ready(function(){
    var $overlay = $('<div class="ui-widget-overlay"></div>').hide().appendTo('body');

    $('.trigger').click(function(){
        $('div').slideDown();
        $('.ui-widget-overlay').fadeIn();
        setOverlayDimensionsToCurrentDocumentDimensions(); //remember to call this when the document dimensions change
    });

    $(window).resize(function(){
        setOverlayDimensionsToCurrentDocumentDimensions();
    });
});

function setOverlayDimensionsToCurrentDocumentDimensions() {
    $('.ui-widget-overlay').width($(document).width());
    $('.ui-widget-overlay').height($(document).height());
}

Note that whenever the height of the document changes (adding elements, animating elements that slide down, etc), you will need to resize the overlay.

Qp

Why not just make a div with fixed position and top, bottom, left, and right set to zero? – Nimbostratus

Answer 1

You could do something like this:

<style type="text/css">
    * {border:0;margin:0}
.ui-widget-overlay {
    background: repeat-x scroll 50% 50% #AAA;
    opacity:0.3;
}

.ui-widget-overlay {
    height:100%;
    left:0;
    position:absolute;
    top:0;
    width:100%;
}

</style>
<script type="text/javascript">

    $(function () {
        var $overlay = $('<div class="ui-overlay"><div class="ui-widget-overlay"></div></div>').hide().appendTo('body');
        $overlay.fadeIn();

        $(window).resize(function () {
            $overlay.width($(document).width());
            $overlay.height($(document).height());
        });
    });
</script>

Cheongsam

This solution looks fine except that sometimes the overlay size causes scroll bars when window is resized from smaller to bigger and then bigger to smaller. That happened with me at least :) So to solve this issue, you might try this work-around not a real solution i guess :) $(window).resize(function () { $overlay .width($(window).width()) .height($(window).height()) .width($(document).width()) .height($(document).height()) ; }); – Levey

I changed the solution a bit for the scrolls. check it below and vote plz :) – Tillis

Answer 2

As of jQuery 1.4.4, it looks like it's as easy as:

$.ui.dialog.overlay.create();

Update

Here is a fiddle.

The code above returns the HTML element, so it should be use like this:

$("body").append($.ui.dialog.overlay.create());

Update 2

As was said, this doesn't work in jquery 1.10. To fix this, I created my own overlay:

<div id="loading" style="display: none;">   
    <div class="loading-container">         
        <img src="/img/loading.gif"/>
    </div>                                  
</div>                                      

(the image is just a random image I wanted to display in the middle to indicate that the page was loading) Then I added this CSS:

/* loading overlays */       
#loading {                   
    position: fixed;         
    top: 0;                  
    left: 0;                 
    width: 100%;             
    height: 100%;            
    background-color: #000;  
    filter:alpha(opacity=50);
    -moz-opacity:0.5;        
    -khtml-opacity: 0.5;     
    opacity: 0.5;            
    z-index: 10000;          
}                            
.loading-container {         
    position:fixed;          
    top: 50%;                
    left: 50%;               
}                            

Then one can call $('#loading').show() and $('#loading').hide() to hide and remove it.

I had to tweak the answer here: stack overflow response

Ericaericaceous

Answer 3

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

Chlamydeous

Quick note for any unlucky souls still bound to supporting IE6, additional work would be required to correctly replicate posistion: fixed; – Rack

Answer 4

It's very simple, to create overlay just use this code:

var overlay = new $.ui.dialog.overlay();

and when you have to destroy it use this code:

overlay.destroy();

Gribble

Answer 5

Here's a thought for your CSS:

.ui-widget-overlay { 
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;

  background-color: #444;

  /* add some opacity here */
} 

Ruralize

Haven't tested it thoroughly, but seems to work! I used { opacity: .3; filter: Alpha(Opacity=30); } – Biparous

Answer 6

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');   
      } ,

Hardhearted

Answer 7

this will work better for weird screens or with framesets :

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; width: 9999px; height: 99999px;"></div></div>').hide().appendTo($('body'));
$(overlay).width('100%');
$(overlay).height('100%');
$(overlay).fadeIn();

check it out: http://jsfiddle.net/techunter/MdjBr/6/

Tillis

Answer 8

Check that: var $dial=$(''); $dial.dialog({modal:true}); $('.ui-dialog').hide();

Alphosis

While this code snippet may solve the question, including an explanation out of the code really helps to improve the quality of your post. Remember that you are answering the question for readers in the future, and those people might not know the reasons for your code suggestion. Please also try not to crowd your code with explanatory comments, this reduces the readability of both the code and the explanations! meta.stackexchange.com/q/114762/308249 – Cage

This solution is like buying a dutch oven just so you can throw away the pot and keep the top. Why not just buy a top? – Nimbostratus

Answer 9

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();

Sharie