jquery simplemodal dynamiczna wysokość

Question

Używam prostego popup w jquery i chciałbym ustawić wysokość mojego wyskakującego dynamicznie w zależności od mojej zawartości. Obecnie jest ustalona na 500. Jeśli usuniemy właściwość wysokości, to działa ona po raz pierwszy, ale jeśli zawartość rośnie, to wysokość się nie dostosowuje (mam zakładki w moim okienku wyskakującym i każda karta ładuje inną treść) .

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

Answer 1

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

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

Następnie trzeba znaleźć sposób, że jeśli wywołanie modalne, skrypt ponownie obliczyć wysokość.

Answer 2

Pozostawienie wysokości domyślnie ustawia ją na wysokość automatyczną. Jeśli zniszczysz okno dialogowe, a następnie natychmiast je odtworzysz, wysokość automatyczna powinna w zasadzie zmienić jego rozmiar. To hack dookoła, ale prawdopodobnie łatwiejsze niż próby obliczenia odpowiedniej wysokości ręcznie. Byłoby ładniej mieć opcję autorekrecji w oknie dialogowym, ale ...

Answer 3

SimpleModal nie ma wbudowanej funkcji, która dostosowuje wysokość/szerokość podczas zmiany zawartości. To jest coś, co musiałbyś dodać.

Answer 4

w jquery.simplemodal.js, nadpisać

containerCss:{} 

przez ten jeden:

containerCss:{width: 650} 

zmienić obrazów css górny i dolny plik GIF.

przez Arman de Guzman de Castro :-)

Answer 5

udało mi się to osiągnąć przez memoizing parametr dialogowe, w którym jest przekazywana do onShow obsługi zdarzeń, a następnie, gdy niektórzy później zdarzenie powoduje zmianę treści, manipulować dialog.container za nieruchomość wysokość css:

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

świadkiem tej techniki pracy w Chrome i Firefox.

Answer 6

mogę mieć wysokość dynamiczny (tylko przetestowane na chromie i ff) poprzez dodanie tej funkcji do ostatniego wiersza onShow:

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

nadzieję, że to może pomóc. Jeśli podasz containerId, powinieneś zamienić "# simplemodal-container" na swój containerId.

Answer 7

Połączyłem odpowiedź Sahata i Tommy'ego, aby uzyskać tę krótszą wersję. Testowałem go w Firefoksie i to działa:

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

Answer 8

Oto co robię:

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

Trudność z niektórymi rozwiązaniami tutaj, czyli ustawienie wysokości auto, jest to, że można stracić ładne zachowanie SimpleModal za aby modal był mniejszy niż bieżący rozmiar okna (ustawiając np. maxHeight na 90%).

I mają pochodzić z następującym roztworem:

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

Istotą jest to, że po uruchomieniu setContainerDimensions na aktywnym modalnym nie będzie przeliczyć je jeśli ciągnąć w nowej zawartości, nawet przy wyraźnym zadzwoń do setContainerDimensions. To, co tu robię, to obejść zapamiętaną wysokość i wymusić przeliczenie.

Będziesz oczywiście musiał zadzwonić do $ .modal.defaults.onPokaż przy każdej zmianie zawartości (wywołanie ajax, zmiana tabulacji itp.), Ale możesz zachować funkcje autoResize i autoPosition, unikając niepotrzebnych pasków przewijania.

Answer 10

tu jest moje rozwiązanie:

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

Testowałem go na FF, Chrome, Safari i Opera.

Mam nadzieję, że działa również dla Ciebie ...

Pozdrawiam!

Answer 11

umieścić to w pliku css:

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

Answer 12

Building off odpowiedzi dmnc za, udało mi się uzyskać tej pracy poprzez dodanie kodu do funkcji onOpen w zwrotnego do pojemnika fadeIn.

Podczas renderowania zawartości jest trochę przeskoku pozycji, ale teraz zmienia się on idealnie dla mnie i nowszych.

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

Oto prosty sposób dynamicznej regulacji wysokości i/lub szerokości prostego modalu Eric Martins. Właśnie dzwonię, żeby otworzyć modal po kliknięciu ".something". Zmierz wysokość/szerokość okna i odejmuję (px lub div (wysokość)). I wtedy ustawić szerokość/wysokość z dynamicznie utworzonej zmiennej (ów)

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