jQuery UI overlay without dialog [duplicate]

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?

Prothorax

What do you mean "without a dialog"? You mean without the dialog header? – Hugibert

No, without anything. Only the overlay. – Prothorax

Here's a similar question with answer: #3783444 – Mary

Answer 1

I take this answer of another SO question.

Here there is a fiddle.

And the code:

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

Prothorax

nice trick, would be great to have something as simple as this but to be ale to overlay just one div. – Garganey

doesn't work with jquery >= 1.10 – Garage

Answer 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.

Seismo

That's what I was looking for, but I don't want to calculate the width and height myself because of cross-browsing issues. – Prothorax

Answer 3

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.

Defer

what would the code look like to call those methods. Something like this: $("#myDialg").dialog._createOverlay() ? Not sure how to invoke those properly... – Toomin

Broken link. Please add code here instead of linking. – Sexpot