dialog jquery che definisce maxHeight in percentuale

Question

Ho creato un piccolo progetto in cui devo visualizzare una finestra di dialogo modale per la quale ho usato la finestra di dialogo jquery-ui.

Voglio definire l'altezza massima per la finestra di dialogo in percentuale. Ho provato diverse cose ma nessuna di queste funzioni.

Per favore qualcuno potrebbe aiutarmi quale potrebbe essere il problema.

Vedi http://jsbin.com/otiley/1/edit

Molte grazie

Answer 1

Provare il collegamento this per impostare l'altezza in percentuale.

$(document).ready(function() { 
$('#testColorBox').click(function() { 
    var wWidth = $(window).width(); 
    var dWidth = wWidth * 0.8; 
    var wHeight = $(window).height(); 
    var dHeight = wHeight * 0.8; 
    var $link = $(this); 
    var $dialog = $('<div></div>') 
     .load('test.html') 
     .dialog({ 
      autoOpen: false, 
      modal: true, 
      title: $link.attr('title'), 
      overlay: { opacity: 0.1, background: "black" }, 
      width: dWidth, 
      height: dHeight, 
      draggable: false, 
          resizable: false 
     }); 
    $dialog.dialog('open'); 
    return false; 
    }); 
}); 

Answer 2

jQuery UI consente solo di esprimere l'altezza massima in pixel. Dovrai eseguire il calcolo su una percentuale del tuo codice.

$(document).ready(function(){ 
    $("#dialog-modal").html($("#temp").html()); 
    $("div#dialog-modal").dialog({ 
     height: "auto", 
    maxHeight: $("div#dialog-modal").outerHeight() * .2, 
     resizable: false, 
     width: "70%", 
     modal: true, 
     title: "Hello" 
    }); 
}); 

Answer 3

È possibile farlo controllando l'altezza della finestra o l'altezza di alcuni div.

Ecco un esempio: http://jsbin.com/otiley/4/edit

Oppure:

$(document).ready(function(){ 
    var height = $(window).height(); 
    height = height*0.20; 
    $("#dialog-modal").html($("#temp").html()); 
    $("div#dialog-modal").dialog({ 
     height: "auto", 
     maxHeight: height, 
     resizable: false, 
     width: "70%", 
     modal: true, 
     title: "Hello" 
    }); 
}); 

Si può prendere l'altezza di qualsiasi div e calcolare qualsiasi percentuale desiderata.