dialogo jQuery UI: scorrimento verticale non funziona correttamente se il dialogo altezza più di altezza della finestra

Question

Ecco il codice:

<script type="text/javascript"> 
    $(function(){ 
     var dialogOptions = { 
      title: "Header", 
      autoOpen: false, 
      modal: true, 
      width: 400, 
      height: 1000 
     }; 
     $(".wnd").dialog(dialogOptions); 
     $("#btn").click(function(){ $(".wnd").dialog("open"); }); 
    }); 
</script> 

<style> 
    .wnd {background:yellow;height:900px;width:300px;} 
</style> 

<div class="wnd"></div> 
<button id="btn">click me</button> 

Quando dialogo è aperto ed superiore della finestra principale v'è un dispositivo di scorrimento laterale e non lo fa Scorri verso il basso se provi a trascinarlo con l'aiuto del cursore del mouse (sembra bloccato).

Ma scivola bene quando si preme il pulsante (freccia) sulla tastiera o si scorre verso il basso con la rotellina del mouse.

Qui è demo on jsfiddle.

Come attivare quel cursore laterale?

Grazie!

Answer 1

Una soluzione pulita sarebbe come questo:

http://jsfiddle.net/4fc33/6/

Quello che sto facendo è wraping la sovrapposizione di jQuery UI creare metodo per disattivare l'evento che impedisce lo scorrimento per funzionare correttamente.

Answer 2

Un approccio alternativo a non essere in grado di utilizzare i cursori della finestra è di abilitare i cursori nella finestra di dialogo stessa. Questi verranno visualizzati automaticamente se si posiziona un berretto sull'altezza massima della finestra di dialogo, ma può essere un po 'complicato con alcune versioni di jQueryUI.

Almeno sulla versione di jQueryUI su cui sono attivo (1.9) Avevo bisogno di specificare l'altezza massima da solo perché la proprietà maxHeight che dovrebbe essere utilizzata in base a the documentation non ha funzionato *.

Ecco cosa ha funzionato:

$("#dialog").dialog({ 
    modal: true, 
    width: "auto", 
    height: "auto" 
    /* maxHeight: whatever won't work, */ 
}).css("maxHeight", window.innerHeight-120); 

ho sottratto 120 pixel largo della altezza della finestra per accogliere per l'intestazione della finestra di dialogo - e la sezione piè di pagina con il suo pulsante "OK".

* L'altezza massima avrebbe effettivamente effetto se si tentava di ridimensionare la finestra di dialogo, ma non sul display.