CODEWITHSUNDEEP
jquerycss
Tom
Tom

Reputation: 2634

jquery modal dialog overlay doesn't take full screen

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.

Upvotes: 6

Views: 9791

Answers (3)

Jason Cidras
Jason Cidras

Reputation: 507

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

Upvotes: 3

JavaMejo
JavaMejo

Reputation: 147

try this:

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

Upvotes: 15

V.Rashkov
V.Rashkov

Reputation: 1735

Try something like

$( "#dialog" ).dialog({
    position: ["left","top"],
    width:"100%",
    height:$(window).height(),
    zIndex: 1000            
});

Upvotes: 1

Related Questions