CODEWITHSUNDEEP
jqueryjquery-uijquery-ui-dialog
Andrew
Andrew

Reputation: 238617

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

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.

Upvotes: 18

Views: 57636

Answers (9)

Frederic
Frederic

Reputation: 1

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

Upvotes: 0

Viking
Viking

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

Upvotes: -2

isaaclw
isaaclw

Reputation: 972

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

Upvotes: 18

Sabeeh Chaudhry
Sabeeh Chaudhry

Reputation: 6374

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

Upvotes: 2

Amol
Amol

Reputation: 1461

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

Upvotes: 1

TecHunter
TecHunter

Reputation: 6131

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/

Upvotes: 0

LOAS
LOAS

Reputation: 7282

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

Upvotes: 5

codeinthehole
codeinthehole

Reputation: 9026

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 */
}

Upvotes: 1

fehays
fehays

Reputation: 3167

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>

Upvotes: 9

Related Questions