jquery modal dialog overlay doesn't take full screen

Question

I have a jquery modal dialog and it doesn't grey out the screen fully when you bring it up. If I take a look it is attributed to this css code:

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

This is from the custom css generated with jquery's Themeroller.

Not sure why those dimensions were created? If I select a higher number for height it covers more of the screen but I'm wondering if there is a value I can use to take the whole screen. I tried 100% and auto for height but they don't do anything.

The dialog size is fine it is just the greyed out overlay behind the dialog. I want this greyed out part behind the dialog to take the size of the full screen. For reference here is my dialog options I'm using:

var dialogOpts={
    modal:true,
    autoOpen: false,
    resizable:false,
    width: 525
}

Thanks in advance.

Answer 1

try this:

.ui-widget-overlay {
    position: fixed !important;
}

Answer 2

I had the same problem, and this is how i fixed it:

<style>
    .ui-widget-overlay
    {
        height: 100vw;
    }
</style>

Now, vw is View Width, and you want the Modal Overlay to cover the whole screen. The "correct" measure should of been vh (View Height) but when I tried that, it didn't work.

Here's a link for vh and vw.

I hope this helps,
Cheers