jQuery ui pantalla completa diálogo

Question

Estoy tratando de hacer un cuadro de diálogo de pantalla completa usando jquery ui.

que tienen algún contenido cargado a través de AJAX, y el resultado se llena el cuadro de diálogo:

function openResource(id) { 
    $.ajax({ 
    url  : "", 
    type  : 'post', 
    dataType : 'html', 
    data : { 
     idRes: id 
    }, 
    success : function(response) { 
     $("#popupRecurso") 
     .html("<div style='float:right; cursor: pointer;' onclick='$(\"#popupRecurso\").dialog(\"destroy\");'>fechar</div>" + response); 

     $("#popupRecurso").dialog({ 
     title  : '', 
     bgiframe : true, 
     position : 'center', 
     draggable : false, 
     resizable : false, 
     dialogClass : 'dialogRecurso', 
     width  : $(window).width(), 
     height  : $(window).height(), 
     stack  : true, 
     zIndex  : 99999, 
     autoOpen : true, 
     modal  : true, 
     open  : function() { 
      $(".ui-dialog-titlebar").hide(); 
     }, 
     error : function(err) { 
      alert(err); 
     } 
     }); 
    } 
    }); 
} 

Por desgracia, el diálogo no aparece en el centro y sin las dimensiones correctas. ¿Alguien ha tenido el mismo problema alguna vez?

Gracias

Answer 1

que me gustaría ver esto en jfiddle para obtener una mejor comprensión de las diferencias de variables que pueden afectar a este. Intente eliminar las configuraciones de "Ancho" y "Altura" para sus propiedades de diálogo, y agregue las propiedades css de ancho: 100% y alto: 100% al contenedor al que llama para el contenido del diálogo. "#popupRecurso". De esta forma, las propiedades del cuadro de diálogo no lo anulan, y cambia con cualquier evento de tamaño de cambio DOM. Actualmente trabajo mucho con modales en mi empresa y he tenido problemas similares. Me gusta establecer las propiedades CSS en algo como ancho:% 120, altura: 120%. De esta forma, la funcionalidad de diálogo que busca permanece fiel, incluso cuando el usuario amplía o aleja el acceso. Espero que esto te ayude. Feliz codificación!