plugin - jquery simplemodal dinamica altura

simple modal jquery

Question

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

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

Answer 1

Aprovechando la respuesta de dmnc, pude hacer que esto funcionara al agregar 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 se reproduce el contenido, pero ahora se redimensiona y se actualiza a la perfección para mí.

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

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

Lo probé en FF, Chrome, Safari y Opera.

Espero que funcione para usted también...

¡Saludos!

Answer 3

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

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

Answer 4

Dejando la altura fuera por defecto se establece en altura automática. Si destruyes el cuadro de diálogo y luego lo vuelves a crear, la altura automática debería básicamente cambiar su tamaño. Es un truco, pero probablemente más fácil que tratar de calcular la altura apropiada manualmente. Sería mejor tener una opción de tamaño automático en el diálogo pero ...

Answer 5

Esta es una forma sencilla de ajustar dinámicamente la altura y / o el ancho del Eric Martins Simple Modal. Solo llamo para abrir un modal después de hacer clic en ''.something''. Mido la altura / anchura de la ventana y restar (px o div (altura)). Luego establezco el ancho / alto con las variables creadas 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 6

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

La dificultad con algunas de las soluciones aquí, es decir, la configuración automática de la altura, es que se pierde el buen comportamiento de simplemodal para mantener el modal más pequeño que el tamaño de la ventana actual (al establecer maxHeight al 90%, por ejemplo).

Se me ha ocurrido 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 ejecute setContainerDimensions en un modo activo, no los volverá a calcular si obtiene contenido nuevo, incluso con una llamada explícita a setContainerDimensions. Lo que hago aquí es sortear 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 tabulación, etc.) pero puede mantener las capacidades de AutoResize y AutoPosition mientras evita las barras de desplazamiento innecesarias.

Answer 8

Pon esto en tu archivo css:

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

Answer 9

Pude lograr esto mediante la memorización del parámetro de diálogo que se pasa al controlador de eventos onShow, luego, cuando algún evento posterior hace que el contenido cambie, manipule la propiedad css 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'')

Fui testigo de esta técnica trabajando en Chrome y Firefox.

Answer 10

Puedo tener una altura dinámica (solo probada en Chrome y ff) agregando esta función a la última línea de onShow:

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

Espero que esto pueda ayudar. Si especifica un containerId , debe reemplazar el ''# simplemodal-container'' con su containerId.

Answer 11

SimpleModal no tiene una función incorporada que ajusta la altura / anchura cuando cambia el contenido. Esto es algo que tendrías que añadir.

Answer 12

en jquery.simplemodal.js, sobrescriba el

containerCss:{}

por este:

containerCss:{width: 650}

cambiar las imágenes css el archivo gif superior e inferior.

por Arman de Guzman de Castro :-)

Answer 13

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

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

Luego, tiene que encontrar una forma en la que cuando active el modal, el script vuelva a calcular la altura.

Answer 14

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