La superposición de diálogo modal jquery no ocupa la pantalla completa

Tengo un cuadro de diálogo modal jquery y no se atenúa completamente la pantalla cuando lo aparece. Si tomo una mirada que se atribuye a este código CSS:La superposición de diálogo modal jquery no ocupa la pantalla completa

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

Esto es de la CSS personalizado generado con jquery de Themeroller.

¿No está seguro de por qué se crearon esas dimensiones? Si selecciono un número más alto para la altura, cubre más de la pantalla, pero me pregunto si hay un valor que pueda usar para tomar toda la pantalla. Intenté 100% y auto para la altura pero no hacen nada.

El tamaño del diálogo está bien, es solo la superposición en gris detrás del cuadro de diálogo. Quiero que esta parte gris del cuadro de diálogo tome el tamaño de la pantalla completa. Como referencia aquí es mis opciones de diálogo que estoy usando:

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

gracias de antemano.

Fuente

2012-06-29 Tom

está cerrado esto? – icedek

intentar algo así como

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

Fuente

2012-06-29 17:39:49 user969724

Creo que lo que sugieres es cambiar el tamaño del diálogo modal. Eso no es lo que quiero. Solo quiero cambiar la superposición, ya sabes la parte en gris detrás del diálogo. En este momento no va a pantalla completa. – Tom

por qué no lo haces al revés, configúralo como en mi código y cambia el fondo del título al tamaño que quieras. El efecto debe ser el mismo. O si desea mantener otra parte como está en el cuadro de diálogo, sin extenderla en una pantalla completa, simplemente ajústelo de ancho/alto, y luego estire todo el cuadro de diálogo. – user969724

Uso los cuadros de diálogo en algunos lugares. A veces solo tiene un texto y otras veces tiene formularios. Estirar el diálogo parece horrible. – Tom

intente esto:

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

Fuente

2014-04-01 10:41:35 JavaMejo

No es el autor de la pregunta, pero quería agregar un comentario diciendo que estaba teniendo este problema exacto y esta respuesta funcionó para mí. – Frank

que tenían el mismo problema, y así es como lo fijé:

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

Ahora, vw es Vista Ancho, y desea que la Superposición modal cubra toda la pantalla. La medida "correcta" debería haber sido vh (Ver Altura) pero cuando lo intenté, no funcionó.

Aquí hay un enlace para vh and vw.

espero que esto ayude,
Saludos

Fuente

2015-12-07 20:19:46

La superposición de diálogo modal jquery no ocupa la pantalla completa

Respuesta

Cuestiones relacionadas