Modales Popup gerade groß genug machen, falls erforderlich mit Bildlaufleiste

Question

Aus Gründen, die ich nicht kontrollieren kann, verwenden wir immer noch Bootstrap 2.3.2. Ich habe ein modales Popup, das zwischen 1 und 50 Zeilen Informationen anzeigen kann. Ich habe es die maximale Größe, die ich könnte auf den Bildschirm passen und machte den Mittelteil, die .modal-body haben eine Bildlaufleiste, wenn nötig. Mein HTML wie folgt aussieht:

<div id="confirm-popup" class="modal hide fade" role="dialog" 
    aria-labelledby="confirm-popup-subject" aria-hidden="true"> 
    <div class="modal-header"> 
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> 
    <h3 id="confirm-popup-subject">XXX</h3> 
    </div> 
    <div class="modal-body" id="confirm-content"> 
    </div> 
    <div class="modal-footer"> 
    <button id="confirm-popup-edit" class="btn" data-dismiss="modal" 
    aria-hidden="true">Edit</button> 
    <button id="confirm-popup-cancel" class="btn" data-dismiss="modal" 
    aria-hidden="true">Cancel</button> 
    <button id="confirm-popup-submit" class="btn btn-primary" 
    aria-hidden="true" data-dismiss="modal">Create Ticket</button> 
    </div> 
</div> 

Mit JavaScript in den $('#confirm-popup-subject') und $('#confirm-content') zu füllen, bevor sie auftauchen.

benutzte ich die folgenden CSS überschreibt diese zu bekommen:

#confirm-poup { 
    top: 2%; 
    bottom: 2%; 
    overflow: initial; 
} 

#confirm-popup .modal-body { 
    overflow-y: auto; 
    max-height: 80%; 
} 

Dies macht den Dialog größten Teil des Bildschirms einnehmen, und wenn es eine Scrollbar braucht es hat. Aber jetzt sagt der Kunde, dass er nicht möchte, dass es so groß ist, wenn nur ein paar Zeilen Text angezeigt werden. Sie wollen, dass es die minimale Größe ist, die es sein kann, und passen Sie immer noch den Textkörper an, aber haben Sie auch noch eine Bildlaufleiste auf dem Modal-Körper, wenn der Textkörper nicht auf den Bildschirm passt. Ist das möglich?

Answer 1

Nach einigen Experimenten habe ich akzeptable Ergebnisse, wenn ich die CSS dies zu ändern:

#confirm-popup { 
    overflow: initial; 
    top: 2%; 
} 
#confirm-popup .modal-body { 
    overflow-y: auto; 
    max-height: 70vh; 
} 

Es ist nicht perfekt - es den Bildschirm überlappt, wenn ich den Browser zu kurz zu machen - aber es funktioniert für alle unterstützten Browser Größen.