Geek asks and answers

Jquery modal dialog overlay does not take up the whole screen

I have a jquery modal dialog and it doesn’t completely screen the screen when you pick it up. If I look, this is attributed to this css code:

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

This is from custom css generated using jquery Themeroller .

Not sure why these measurements were created? If I choose a higher number for height, it will cover more of the screen, but I wonder if there is a value that I can use to display the whole screen. I tried 100%and autofor the height, but they do nothing.

The size of the dialog box is fine; it’s just the outline behind the dialog. I want this gray part behind the dialog to take the size of the full screen. For reference, here are my dialog options that I use:

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

Thanks in advance.

+5
source share
3 answers

try the following:

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

Try something like

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

, :

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

vw - View Width, , Modal Overlay . "" vh (View Height), , .

vh vw.

, ,

+1

More articles:


All Articles