jQuery UI overlay without dialog

jquery jquery-ui overlay jquery-ui-dialog

11,991

Solution 1

I take this answer of another SO question.

And the code:

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

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

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

11,991

Author by

Diego

I'm 28 years old and I started working as a developer as soon as I graduated ORT high-school technical course of studies. I've been working in software development ever since and I have acquired experience with different kind of teams and projects. I've also worked with some clients on my own as a freelancer. Since the beginning of my tech career, I've wanted to grow as a software architect and I'm proud to say I have. I've mainly worked with .NET web technologies and been in charge of different projects, which led me to becoming the architect of a very large and complex product. After getting my Systems Analyst degree I found a new passion in Information Security, so I studied an Information Security Master's degree at Universidad de Buenos Aires. Although I'm not sure I'd like to work directly at the Security area, I love applying that knowledge to development and I really think that's an underrated profile. Besides being kind of a geek and a techie, I've trained Taekwon-do for a lot of years and I enjoy playing sports like handball, tennis and squash. I also like cooking and, of course, eating!

Updated on June 04, 2022

Comments

Diego almost 2 years

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?
Diego over 11 years

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

nice trick, would be great to have something as simple as this but to be ale to overlay just one div.
Sergey about 10 years

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

Broken link. Please add code here instead of linking.
OSdave over 5 years

doesn't work with jquery >= 1.10