Verschieben Bootstrap modal auf Seite

Ich habe ein Bootstrap modal auf dem Bildschirm. Wenn das Modal angezeigt wird, befindet es sich in der Mitte des Bildschirms.Verschieben Bootstrap modal auf Seite

<div class="modal fade" id="ua_dialog"> 
<div class="modal-dialog"> 
    <div class="modal-content"> 
     <div class="modal-header"> 
     <div class="modal-body"> 
     .... 
     </div> 
     </div>

Ich muss das modale auf meinem Bildschirm verschieben, weil einige Informationen von meinem Bildschirm abdecken. Der Benutzer sollte sich rechts, links usw. bewegen können. Kann ich das machen? Es gibt einige Einstellungen, die ich verwenden kann? oder mit js? Was ist der beste Weg? Vielen Dank!

Quelle

2017-12-07 Orsi

Mögliche Duplikat [wie die Standard-Positionierung der modalen in Bootstrap ändern?] (Https : //stackoverflow.com/questions/24731307/how-to-change-the-default-positioning-of-modal-in-bootstrap) – CBroe

_ "Ich muss das Modal auf meinem Bildschirm verschieben, da einige Informationen von meinem Bildschirm abgedeckt werden." _ - Wenn Sie Informationen außerhalb des Modales haben, die noch zugänglich sein müssen, könnte das eher bedeuten, dass ein Modal das Falsche ist verwenden Sie hier in erster Linie ... – CBroe

Es deckt eine Karte, die sichtbar sein muss. Kann ich das Modal beweglich machen? Oder muss ich das Modal zum Beispiel auf der rechten Seite des Bildschirms positionieren? – Orsi

Ich glaube, Sie müssen diese :)

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet"/> 
 
<script src="//code.jquery.com/jquery-1.10.2.js"></script> 
 
<script src="//code.jquery.com/ui/1.11.2/jquery-ui.js"></script> 
 

 
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script> 
 
<div> 
 
<div class="modal fade"> 
 
    <div class="modal-dialog"> 
 
    <div class="modal-content"> 
 
     <div class="modal-header"> 
 
     <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button> 
 
     <h4 class="modal-title">Modal title</h4> 
 
     </div> 
 
     <div class="modal-body"> 
 
     <p>One fine body&hellip;</p> 
 
     </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 --> 
 
</div> 
 

 
<script> 
 
     $('.modal').modal({ keyboard: false, 
 
          show: true 
 
     }); 
 
     // Jquery draggable 
 
     $('.modal-dialog').draggable({ 
 
      handle: ".modal-header" 
 
     }); 
 
</script>

Quelle

2017-12-07 11:13:47

.modal-content{ 
 
    margin-top:50px !important; 
 
}

Quelle

2017-12-07 11:14:50 chv

Verwenden Sie wichtig in Ihrem CSS – chv

Verschieben Bootstrap modal auf Seite

Antwort

Verwandte Themen