jquery simplemodal dynamic height

Question

Sto usando il popup simplemodal in jquery e vorrei impostare l'altezza del mio popup dinamicamente a seconda del mio contenuto. Attualmente è fissato a 500. Se rimuovo la proprietà height, allora funziona la prima volta, ma se il contenuto cresce, l'altezza non si aggiusta da solo (ho delle schede all'interno del mio popup e ogni scheda carica un contenuto diverso) .

$("#popup").modal({ 
     containerCss: { 
      width: 550, 
      height: 500 
     }, 

Answer 1

var h = $(your_content_element).css('height'); 

$("#popup").modal({ 
     containerCss: { 
      width: 550, 
      height: h 
     }, 

poi si deve trovare un modo che quando si attiva il modal, lo script calcola di nuovo l'altezza.

Answer 2

Lasciando l'altezza, viene automaticamente impostato all'altezza automatica. Se si distrugge la finestra di dialogo e quindi la si ricrea immediatamente, l'altezza automatica dovrebbe ridimensionarla essenzialmente per te. Si tratta di un trucco, ma probabilmente è più facile che cercare di calcolare manualmente l'altezza appropriata. Sarebbe più bello avere un'opzione di modifica automatica nel dialogo, ma ...

Answer 3

SimpleModal non ha una funzione incorporata che regola altezza/larghezza quando il contenuto cambia. Questo è qualcosa che dovresti aggiungere.

Answer 4

in jquery.simplemodal.js, sovrascrivere il

containerCss:{} 

da questo:

containerCss:{width: 650} 

cambiare le immagini css file superiore e inferiore gif.

di Arman de Guzman de Castro :-)

Answer 5

sono stato in grado di ottenere questo risultato memoizing il parametro finestra di dialogo che viene passato in al gestore di eventi OnShow, poi quando un evento in seguito fa sì che il contenuto di modificare, manipolare il proprietà height css di dialog.container:

 
<script type="text/javascript"> 
var walkInDlg; 
function doModal() { // called from onClick of some button on the page 
    jQuery.modal("#aModal", { height:"auto", 
     width:500, 
     backgroundColor:"#807c68", 
     overlay:75, 
     onShow: function(dlg) { walkInDlg = dlg }, 
     onClose: function(dlg) { walkInDlg = undefined; jQuery.modal.close() }, 
     containerCss:{border:"0",padding:"0"} 
    }) 
} 
</script> 

...

 
// somewhere else in the page 
// this is in the event handler for an action that 
// adds content to the dialog 

... 
// after adding the content, do this: 
jQuery(walkInDlg.container).css('height', 'auto') 

assistito questa tecnica di lavoro in Chrome e Firefox.

Answer 6

posso avere un'altezza dinamica (testato solo su Chrome e FF) con l'aggiunta di questa funzione per ultima linea di OnShow:

$('#simplemodal-container').css('height', 'auto'); 

speranza che questo potrebbe aiutare. Se si specifica un container , è necessario sostituire lo "# simplemodal-container" con l'ID contenitore.

Answer 7

Ho unito la risposta di Sahat e Tommy per ottenere questa versione più breve. L'ho provato in Firefox e funziona:

$.modal("<p>yourContent</p>", { onShow: function(dlg) { 
    $(dlg.container).css('height','auto') 
}}); 

Answer 8

Ecco quello che faccio:

$.extend($.modal.defaults, { 
    closeClass: "close", 
    closeHTML: "<a></a>", 
    minWidth: 400, 
    minHeight: 200, 
    maxWidth: 780, 
    maxHeight: 580, 
    onShow: function (dialog) { 
     dialog.container.css("height", "auto"); 
    } 
}); 

Answer 9

La difficoltà con alcune delle soluzioni qui, vale a dire l'impostazione altezza auto, è che si perde bel comportamento di SimpleModal per mantenere la modale più piccola della dimensione corrente della finestra (impostando l'altezza massima al 90%, ad esempio).

sono venuto con la seguente soluzione:

$.modal.defaults.onShow = function(dialog) { 
    if (!dialog) dialog = $.modal.impl.d 
    dialog.container.css('height', 'auto'); 
    dialog.origHeight = 0; 
    $.modal.setContainerDimensions(); 
    $.modal.setPosition(); 
    } 

L'essenza di questo è che una volta che si esegue setContainerDimensions su un modale attiva non ricalcola loro se si tira a nuovi contenuti, anche con un esplicito chiama a setContainerDimensions. Quello che faccio qui è aggirare l'altezza ricordata e forzare il ricalcolo.

Ovviamente è necessario chiamare $ .modal.defaults.onShow ogni volta che si modifica il contenuto (chiamata ajax, cambio scheda, ecc.) Ma è possibile mantenere le funzionalità autoResize e autoPosition evitando inutili barre di scorrimento.

Answer 10

qui è la mia soluzione:

var activeModal; 
$.extend($.modal.defaults, { 
    onShow: function(dialog) { 
     activeModal = dialog; 
     dialog.container.css('height', 'auto'); 
    } 
}); 
function showModal() { // Creates a modal 
    $.modal("#aModal"); 
} 
... 
function changeModalContent() { // A function that changes the modal content 
    ... 
    // After changing the content, do this: 
    $.modal.update(activeModal.data.css('height'), 'auto'); 
} 

ho testato su FF, Chrome, Safari e Opera.

auguro che funziona anche per te ...

saluti!

Answer 11

mettere questo nel file css:

.simplemodal-container 
{ 
    height:auto !important; 
} 

Answer 12

Costruzione off di risposta di dmnc, sono stato in grado di ottenere questo lavoro aggiungendo il codice alla funzione onOpen, nella richiamata per il contenitore fadeIn.

C'è un po 'di una posizione di salto come contenuto rende, ma ridimensiona e ricentrata perfettamente per me ora.

$('#target').modal({ 
    overlayClose: true, 
    onOpen: function (dialog) { 
     dialog.overlay.fadeIn('fast', function(){ 
      dialog.data.hide(); 
      dialog.container.fadeIn('fast', function(){ 
       dialog.data.fadeIn('fast'); 

       // where the magic happens 
       dialog.container.css('height', 'auto'); 
       dialog.origHeight = 0; 
       $.modal.setContainerDimensions(); 
       $.modal.setPosition(); 
      }); 
     }); 
    }, 
    onClose: function (dialog) { ... } 
}); 

Answer 13

Ecco un modo semplice per regolare dinamicamente l'altezza e/o la larghezza di Eric Martins Simple Modal. Sto solo chiamando per aprire un modale dopo che è stato fatto clic su '.qualcosa'. Misuro l'altezza/larghezza della finestra e sottraggo (px o div (altezza)). Ho quindi impostare la larghezza/altezza con la variabile creata dinamicamente (s)

$('.something ').click(function() { 
     //Dynamically Get Height/Width of the Window 
     var wh = $(window).height() - 100 
     var ww = $(window).width() - 100 
      //Can subtract other divs heights if wanted 
      //var dh = $('#exampleDiv').height(); 
      //dh = (wh - dh);  
     $('#modalThis').modal({ 
      containerCss : {     
       height : wh, 
      //or height : dh    
       width : ww 

      }, 
     }); 
    }); 

Answer 14

.modal({ 
    autoResize:true, 
    maxHeight: $(window).height(),     
    minHeight: $(window).height() - 100    
});