Come la finestra di dialogo modale centrale nella finestra a scorrimento con posizione assoluta?

Question

Sto cercando di centrare una finestra di dialogo modale nella finestra a scorrimento. Questa modale è assoluta in posizione perché dev'essere trascinabile sullo schermo. Io uso questo plugin per la funzione trascinabili:

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

Il mio problema è che questo modale ha posizione assoluta se metto in alto: il 50% si mostra modale finestra centrale, ma non considerando tutto finestra a scorrimento.

Answer 1

Se si trova all'interno di un div scorrevole, verificare che il div originale sia: <div style="position:relative;">.

In questo modo, un div al suo interno che è assoluto rimarrà entro i confini di essa, e usare il suo genitore relativa div come punto di riferimento per top:50%;

Answer 2

Si dovrebbe usare

position:fixed 

invece assoluto/relativo.

posizione: fissa L'elemento è posizionato rispetto alla finestra del browser.

Utilizzare questo e non si devono affrontare problemi dovuti allo scorrimento.

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

si può vedere questo argomenti, troppo:

Fixed Positioning without Scrolling

How to place a div center of the window after scrolling

Answer 3

In generale, per trovare il centro della finestra con barre di scorrimento. Prendi l'altezza della finestra, divisa per 2, più scorri in alto. Il risultato è il numero di pixel che qualcosa dovrebbe essere spostato dal documento in alto.

Se il vostro elemento posizionato è un bambino di più di un elemento scorrevole allora si avrà bisogno per tenere conto di quelli, ma la matematica di base è la stessa.

Come nota a margine, un esempio di markup che si sta tentando di utilizzare aiuterebbe ottenere risposte più precise.

Answer 4

Così il vostro dialogo è la sua posizione impostata assoluta ed è un figlio diretto del documento/corpo, giusto?

Centrare un modale richiesto con la posizione assoluta:

// 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

prova eliminato l'opzione di posizione di

$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"); 

           } 
      } 
     });