jquery simplemodal dynamische Höhe

Question

Ich verwende das SimpleModel Popup in jQuery, und ich möchte die Höhe meines Popup dynamisch abhängig von meinem Inhalt einstellen. Momentan ist es auf 500 festgelegt. Wenn ich die height -Eigenschaft entferne, funktioniert es das erste Mal, aber wenn der Inhalt wächst, passt sich die Höhe nicht an (Ich habe Registerkarten in meinem Popup und jede Registerkarte lädt unterschiedliche Inhalte) .

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

Answer 1

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

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

Dann muss man einen Weg finden, dass, wenn Sie die modalen auslösen, das Skript die Höhe erneut berechnen.

Answer 2

Wenn die Höhe verlassen wird, wird die Höhe automatisch eingestellt. Wenn Sie den Dialog zerstören und ihn dann sofort neu erstellen, sollte die automatische Höhe die Größe für Sie ändern. Es ist ein Hack, aber wahrscheinlich einfacher als versuchen, die entsprechende Höhe manuell zu berechnen. Es wäre schöner, eine Autoresize-Option im Dialogfeld zu haben, aber ...

Answer 3

SimpleModal hat keine eingebaute Funktion, die Höhe/Breite einstellt, wenn sich der Inhalt ändert. Das müssen Sie hinzufügen.

Answer 4

in jquery.simplemodal.js, überschreiben die

containerCss:{} 

durch dieses:

containerCss:{width: 650} 

Änderung der CSS Bilder oben und unten gif-Datei.

von Arman de Guzman de Castro :-)

Answer 5

Ich konnte dies durch memoizing den Dialog Parameter erreichen, die in die onShow Ereignishandler übergeben wird, dann, wenn einige spätere Ereignis zu ändern verursacht Inhalt, manipulieren die dialog.container css Eigenschaft height:

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

erlebt diese Technik funktioniert in Chrome und Firefox.

Answer 6

kann ich dynamische Höhe haben (nur auf Chrom getestet und ff) durch diese Funktion letzte Zeile onShow Zugabe:

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

Hoffnung dies helfen könnte. Wenn Sie eine containerId angeben, sollten Sie die '# simple modal-container' durch Ihre containerId ersetzen.

Answer 7

Ich kombinierte Sahats und Tommys Antwort, um diese kürzere Version zu bekommen. Getestet habe ich es in Firefox und es funktioniert:

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

Answer 8

Hier ist, was ich tue:

$.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

Die Schwierigkeit mit einigen der Lösungen hier, das heißt Höhe auto Einstellung ist, dass Sie SimpleModal ist schön Verhalten verlieren um das Modal kleiner als die aktuelle Fenstergröße zu halten (indem Sie beispielsweise maxHeight auf 90% setzen).

Ich habe mit folgender Lösung gekommen:

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

Das Wesentliche ist, dass, sobald Sie setContainerDimensions auf einem aktiven modalen führen Sie es ihnen nicht neu berechnet werden, wenn man im neuen Inhalten ziehen, auch mit einer expliziten Aufruf von setContainerDimensions. Was ich hier mache, ist, die erinnerte Höhe zu umgehen und die Neuberechnung zu erzwingen.

Natürlich müssen Sie $ .modal.defaults.onShow jedes Mal aufrufen, wenn Sie den Inhalt ändern (Ajax-Aufruf, Tab-Wechsel usw.), aber Sie können die autoResize- und autoPosition-Funktionen beibehalten und unnötige Scrollbalken vermeiden.

Answer 10

hier ist meine Lösung:

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

Getestet habe ich es auf FF, Chrome, Safari und Opera.

Hoffe, dass es für Sie arbeitet auch ...

Grüße!

Answer 11

Setzen Sie diese in Ihrer CSS-Datei:

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

Answer 12

Gebäude aus Antwort von dmnc ist, konnte ich diese Funktion erhalten, indem Sie den Code in die onOpen Funktion hinzugefügt, in der Callback für den Container fadeIn.

Es gibt ein bisschen einen Positionssprung, während Inhalt rendert, aber es ändert sich die Größe und zentriert jetzt perfekt für mich.

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

Hier ist eine einfache Möglichkeit, die Höhe und/oder Breite von Eric Martins Einfachen Modal dynamisch anzupassen. Ich rufe nur an, um ein Modal zu öffnen, nachdem das "Etwas" angeklickt wurde. Ich messe die Fensterhöhe/-breite und subtrahiere (px oder div (Höhe)). Ich habe dann die Breite/Höhe mit dem dynamisch erstellten Variable (n)

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