jquery simplemodal altura dinámica

Question

Estoy usando la ventana emergente simplemodal en jquery, y me gustaría establecer la altura de mi ventana emergente dinámicamente dependiendo de mi contenido. Actualmente, está fijado en 500. Si elimino la propiedad de altura, funciona la primera vez, pero si el contenido crece, la altura no se ajusta (tengo pestañas en mi ventana emergente y cada pestaña carga contenido diferente) .

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

Answer 1

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

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

entonces usted tiene que encontrar una manera de que cuando se dispara el modal, el guión calcular la altura de nuevo.

Answer 2

Al dejar la altura, se establece de forma predeterminada en altura automática. Si destruye el cuadro de diálogo y lo vuelve a crear inmediatamente, la altura automática esencialmente debería redimensionarlo por usted. Es un truco pero probablemente más fácil que tratar de calcular la altura adecuada manualmente. Sería mejor tener una opción de conversión de tamaño en el diálogo, pero ...

Answer 3

SimpleModal no tiene una función incorporada que ajuste el alto/ancho cuando cambia el contenido. Esto es algo que deberías agregar.

Answer 4

en jquery.simplemodal.js, sobrescribir el

containerCss:{} 

por éste:

containerCss:{width: 650} 

cambio de las imágenes css el archivo gif parte superior e inferior.

de Arman de Guzmán de Castro :-)

Answer 5

pude lograr esto mediante memoizing el parámetro de diálogo que se pasa al controlador de eventos OnShow, a continuación, cuando algún acontecimiento posterior hace que el contenido de cambiar, manipular el css propiedad height de 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') 

testigo de esta técnica de trabajo en Chrome y Firefox.

Answer 6

puedo tener altura dinámica (sólo probado en cromo y ss) mediante la adición de esta función a la última línea de OnShow:

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

esperanza que esto podría ayudar. Si especifica un containerId, debe reemplazar el '# simplemodal-container' con su containerId.

Answer 7

Combiné la respuesta de Sahat y Tommy para obtener esta versión más corta. Lo he comprobado en Firefox y funciona:

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

Answer 8

Aquí es lo que hago:

$.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 dificultad con algunas de las soluciones aquí, es decir, el establecimiento automático de altura, es que se pierde buen comportamiento de SimpleModal para mantener el modal más pequeño que el tamaño de ventana actual (estableciendo maxHeight al 90%, por ejemplo).

que han llegado con la siguiente solución:

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

La esencia de esto es que una vez que se ejecuta setContainerDimensions en una modal activa no va a volver a calcular si se tira de nuevo contenido, incluso con una explícita llamar a setContainerDimensions. Lo que hago aquí es dar la vuelta a la altura recordada y forzar el recálculo.

Por supuesto, tendrá que llamar a $ .modal.defaults.onShow cada vez que cambie el contenido (llamada ajax, cambio de pestaña, etc.) pero puede mantener las capacidades de autoResize y autoPosition mientras evita barras de desplazamiento innecesarias.

Answer 10

aquí está mi solución:

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'); 
} 

he comprobado en FF, Chrome, Safari y Opera.

espero que funcione para usted también ...

Saludos!

Answer 11

poner esto en su archivo css:

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

Answer 12

edificio fuera de la respuesta de dmnc, yo era capaz de conseguir este trabajo, añadiendo el código a la función onOpen, en la devolución de llamada para el contenedor fadeIn.

Hay un poco de salto de posición a medida que el contenido se renderiza, pero cambia de tamaño y se vuelve a centrar perfectamente para mí ahora.

$('#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

Aquí hay una manera simple de ajustar dinámicamente la altura y/o el ancho de Eric Martins Simple Modal. Solo llamo para abrir un modal después de hacer clic en ".something". Mido la altura/ancho de la ventana y resta (px o div (altura)). entonces establecer la anchura/altura con la variable (s) creado dinámicamente

$('.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    
});