jQuery UI overlay without dialog

Question

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

I want to avoid the user to change the screen during ajax calls. So I was thinking to use jQuery UI overlay (the overlay of the modal dialogs) but without any dialog. I couldn't find any way to do this.

Is there any way to show a modal without a dialog?

What do you mean "without a dialog"? You mean without the dialog header? — Justin Niessner, Dec 21 '12 at 16:14
Here's a similar question with answer: http://stackoverflow.com/questions/3782944/jquery-ui-how-to-use-ui-widget-overlay-by-itself — Syon, Dec 21 '12 at 16:16

score 5 · Accepted Answer · edited May 23 '17 at 11:52

5

I take this answer of another SO question.

Here there is a fiddle.

And the code:

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

edited May 23 '17 at 11:52

Community

1
1

answered Dec 21 '12 at 16:25

Diego

16,436
26
84
136

nice trick, would be great to have something as simple as this but to be ale to overlay just one div. – Oct 23 '13 at 11:17
2

doesn't work with jquery >= 1.10 – OSdave Sep 05 '18 at 14:10

score 2 · Answer 2 · answered Dec 21 '12 at 16:15

2

The dialog with the modal option set to true adds the following div, where width and height represent the viewable area in the browser window:

<div class="ui-widget-overlay" style="width: 607px; height: 350px; z-index: 1001;"></div>

You could try something similar on your page. See http://jqueryui.com/dialog/#modal and then view source on the demo iframe for the complete source.

answered Dec 21 '12 at 16:15

jrummell

42,637
17
112
171

That's what I was looking for, but I don't want to calculate the width and height myself because of cross-browsing issues. – Diego Dec 21 '12 at 16:25

score 1 · Answer 3 · answered Dec 21 '12 at 16:19

1

https://github.com/jquery/jquery-ui/blob/master/ui/jquery.ui.dialog.js

Their code shows that they call _createOverlay() and _destroyOverlay() on the widget. You could try creating a dialog and init it with autoOpen:false and then invoke those methods manually.

answered Dec 21 '12 at 16:19

Jason Whitted

4,059
1
16
16

what would the code look like to call those methods. Something like this: $("#myDialg").dialog._createOverlay() ? Not sure how to invoke those properly... – Sergey Apr 16 '14 at 18:44
1

Broken link. Please add code here instead of linking. – bnieland Sep 08 '16 at 15:59

jQuery UI overlay without dialog

3 Answers3

Linked