jueves, 11 de agosto de 2016

Centrar un Jquery Dialog

Me encontre un chicharron en mi trabajo, el cual casi no puedo solucionar. Resulta que mi empresa utiliza una plantilla basada en tablas (puffff esto esta hecho desde antes que yo llegara y no permiten cambiarlo). El chicharron que me paso fue que al querer implementar Jquery UI Dialog, para mejorar un poco el aspecto visual del sistema, todas las ventanas de dialogo me aparecian en el borde superior izquierdo, cuando normalmente aparecen centrados en la pantalla.
Indagando en la red encontre la solucion y la comparto con quien la necesite:

Se debe agregar esto al final de tu CSS:

.ui-dialog {
    left: 50% !important;
    top: 50% !important;
    margin-left: -175px !important;
    margin-top: -175px !important;
}


y cuando se este instanciando el Jquery Dialog se debe agregar:

position: {
 my: "top",
 at: "top",
 of: window  
 },
  create: function (event, ui) {
$(event.target).parent().css("position", "fixed");
},

Ejemplo:

 $(document).ready(function()
 { 
    $( "#nombreselector" ).dialog({
      autoOpen: false,
      height: 320,
      width: 520,
      modal: true,
      position: {
 my: "top",
 at: "top",
 of: window  
 },
  create: function (event, ui) {
$(event.target).parent().css("position", "fixed");
},
      buttons: {
        "Aceptar": function() {
              // Aca tu codigo          
                             
        },
        Cancelar: function() {
          $( this ).dialog( "close" );
           
        }
      },
      close: function() {
        //allFields.val( "" ).removeClass( "ui-state-error" );
      }
    })

 })

 Fuente: http://www.arelthiaphillips.com/position-jquery-ui-dialog-window/