Bootstrap Modal füllt Platz nicht richtig aus

Question

Dies ist eher eine allgemeine Frage als alles andere. Also habe ich zwei Situationen. Eine, in der ich einen Iframe innerhalb des Modals und den anderen erzeuge, fülle ich das Modal über einen Ajax-Aufruf.

Das Problem mit der ersten Situation ist, dass der iframe im Vergleich zum gesamten modalen sehr klein ist und nur die linke Seite des Modales ausfüllt.

Das Problem mit dem anderen Verfahren ist, dass es irgendwann viele leeren weißen Räume schaffen kann.

Ich frage mich, wie um diese beiden Fragen zu bekommen. Ich habe versucht, es mit max-width: 100%; width: auto; height: auto zu überschreiben, aber sie haben nichts getan, außer es standardmäßig zu maximieren.

Bonus: Ich finde, Bootstrap-Modale sind zu verschachtelt, um auf eine komplexere Art und Weise verwendet werden. Wenn mir jemand ein besseres modales System empfehlen könnte, wäre das großartig. Ich habe jQueryMobile vorher benutzt und ihre Modalitäten waren ausgezeichnet (da sie die Abstandsprobleme behob), aber sie kamen mit eigenen Problemen.

Answer 1

Geändert CSS-Eigenschaften, um dies als das Popup mit Berücksichtigung basierend auf dem Inhalt innerhalb des Körpers.

.modal-dialog{max-width:800px; width:auto !important; display:table}

<link href="http://getbootstrap.com/dist/css/bootstrap.min.css" rel="stylesheet"/> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="http://getbootstrap.com/dist/js/bootstrap.min.js"></script> 
 

 
Modal with limited text 
 
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal"> 
 
    Launch Modal 
 
</button> 
 

 
<br><br><br> 
 
Modal with Large Content 
 
<!-- Large modal --> 
 
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#bs-example-modal-lg">Launch Modal</button> 
 

 
<div class="modal fade" id="bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"> 
 
    <div class="modal-dialog" role="document"> 
 
    <div class="modal-content"> 
 
     <div class="modal-header"> 
 
     <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button> 
 
     <h4 class="modal-title" id="myModalLabel">Modal title</h4> 
 
     </div> 
 
     <div class="modal-body"> 
 
     Tight pants next level keffiyeh you probably haven't heard of them. Photo booth beard raw denim letterpress vegan messenger bag stumptown. Farm-to-table seitan, mcsweeney's fixie sustainable quinoa 8-bit american apparel have a terry richardson vinyl chambray. Beard stumptown, cardigans banh mi lomo thundercats. Tofu biodiesel williamsburg marfa, four loko mcsweeney's cleanse vegan chambray. A really ironic artisan whatever keytar, scenester farm-to-table banksy Austin twitter handle freegan cred raw denim single-origin coffee viral.Tight pants next level keffiyeh you probably haven't heard of them. Photo booth beard raw denim letterpress vegan messenger bag stumptown. Farm-to-table seitan, mcsweeney's fixie sustainable quinoa 8-bit american apparel have a terry richardson vinyl chambray. Beard stumptown, cardigans banh mi lomo thundercats. Tofu biodiesel williamsburg marfa, four loko mcsweeney's cleanse vegan chambray. A really ironic artisan whatever keytar, scenester farm-to-table banksy Austin twitter handle freegan cred raw denim single-origin coffee viral.Tight pants next level keffiyeh you probably haven't heard of them. Photo booth beard raw denim letterpress vegan messenger bag stumptown. Farm-to-table seitan, mcsweeney's fixie sustainable quinoa 8-bit american apparel have a terry richardson vinyl chambray. Beard stumptown, cardigans banh mi lomo thundercats. Tofu biodiesel williamsburg marfa, four loko mcsweeney's cleanse vegan chambray. A really ironic artisan whatever keytar, scenester farm-to-table banksy Austin twitter handle freegan cred raw denim single-origin coffee viral.Tight pants next level keffiyeh you probably haven't heard of them. Photo booth beard raw denim letterpress vegan messenger bag stumptown. Farm-to-table seitan, mcsweeney's fixie sustainable quinoa 8-bit american apparel have a terry richardson vinyl chambray. Beard stumptown, cardigans banh mi lomo thundercats. Tofu biodiesel williamsburg marfa, four loko mcsweeney's cleanse vegan chambray. A really ironic artisan whatever keytar, scenester farm-to-table banksy Austin twitter handle freegan cred raw denim single-origin coffee viral. 
 
     </div> 
 
     <div class="modal-footer"> 
 
     <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
 
     <button type="button" class="btn btn-primary">Save changes</button> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div> 
 

 
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="gridSystemModalLabel"> 
 
    <div class="modal-dialog" role="document"> 
 
    <div class="modal-content"> 
 
     <div class="modal-header"> 
 
     <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button> 
 
     <h4 class="modal-title" id="gridSystemModalLabel">Modal title</h4> 
 
     </div> 
 
     <div class="modal-body"> 
 
     Tight pants next level keffiyeh you. 
 
     </div> 
 
     <div class="modal-footer"> 
 
     <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
 
     <button type="button" class="btn btn-primary">Save changes</button> 
 
     </div> 
 
    </div><!-- /.modal-content --> 
 
    </div><!-- /.modal-dialog --> 
 
</div><!-- /.modal -->

Answer 2

versuchen Sie eine max-width mit einem width: 100%; auf dem iframe und verwenden Sie die Modal-Bootstrap-Klasse auf dem Modal.

z.B. modal-lg