¿Cómo se centra el diálogo modal en la ventana desplazada con la posición absoluta?

Question

Estoy tratando de centrar un cuadro de diálogo modal en la ventana desplazada. Este modal es posición absoluta porque debe ser arrastrable en la pantalla. Yo uso este plugin para la función que pueden arrastrarse:

http://threedubmedia.com/code/event/drag

Mi problema es que este modal tiene posición absoluta si pongo la parte superior: 50% se muestra en la ventana modal centro, pero no teniendo en cuenta todo ventana de desplazamiento.

Answer 1

Si está dentro de un div desplazable, asegúrese de que div original es: <div style="position:relative;">.

De esta manera, un div su interior que es absoluta se mantendrá dentro de los límites de la misma, y ​​el uso de su matriz div relativo como un punto de referencia para top:50%;

Answer 2

Debe utilizar

position:fixed 

en cambio absoluto/relativo.

posición: fijo El elemento está ubicado en relación con la ventana del navegador.

Utilice esto y no debería enfrentar ningún problema debido al desplazamiento.

http://www.w3schools.com/cssref/pr_class_position.asp

Se puede ver estos temas, también:

Fixed Positioning without Scrolling

How to place a div center of the window after scrolling

Answer 3

En general, para encontrar el centro de la ventana con barras de desplazamiento. Tome la altura de la ventana, dividida por 2, más la parte superior de desplazamiento. El resultado es la cantidad de píxeles a los que se debe compensar algo desde la parte superior del documento.

Si su elemento posicionado es hijo de más de un elemento desplazable, tendrá que dar cuenta de eso, pero la matemática básica es la misma.

Como nota al margen, un ejemplo del marcado que está tratando de utilizar ayudaría a obtener respuestas más exactas.

Answer 4

Por lo tanto, su cuadro de diálogo tiene su posición establecida en absoluta y es un elemento secundario del documento/cuerpo, ¿verdad?

Centrar un modal se le pida con la posición absoluta:

// Get the document offset : 
var offset = $(document).scrollTop(), 

// Get the window viewport height 
viewportHeight = $(window).height(), 

// cache your dialog element 
    $myDialog = $('#MY_DIALOG'); 

// now set your dialog position 
$myDialog.css('top', (offset + (viewportHeight/2)) - ($myDialog.outerHeight()/2)); 

Answer 5

intento suprime la opción de posición

$dialog = $('<div><table width="100%" height="100%"><tr><td height="100%" align="center"><img style="vertical-align:middle" src="css/images/ajax-loader.gif"></td></tr></table></div>') 
     .html(msj) 
     .dialog({ 
      title:"Validacion del ingreso.", 
      width:350, 
      height:200, 
      modal:true, 
      draggable:true, 
      buttons: { 
           "Aceptar": function() 
           { 
             $(this).dialog("close"); 
             $(this).dialog("destroy"); 

           } 
      } 
     });