StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

POjQuery UI: How to use ui-widget-overlay by itself?
text
Body
copied!<p>I am trying to create an overlay, similar to the one that jQuery UI Dialog uses. I can create the overlay like this:</p> <pre><code>var $overlay = $('<div class="ui-widget-overlay"></div>').hide().appendTo('body'); //...later in my script $overlay.fadeIn(); </code></pre> <p>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?</p> <h2>Solution:</h2> <p>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:</p> <pre><code>$(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()); } </code></pre> <p>Note that whenever the height of the document changes (adding elements, animating elements that slide down, etc), you will need to resize the overlay.</p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload