Ich verwende reguläre Bootstrap 3-Modale, aber ich möchte sie ein wenig optimieren.Wie platziere ich Elemente im Bootstrap-Modal-Hintergrund?
Ich möchte ein Logo auf der oberen linken Ecke platzieren und die Schließen-Schaltfläche auf der rechten oberen Ecke der Kulisse, wie folgt aus:
Ich habe mit einigen CSS Pseudo-Selektoren spielen um zu Inhalt einfügen, aber nichts davon hat funktioniert. Vielleicht hat einer von euch eine Idee.
Vielen Dank im Voraus.
Sie können diese Elemente auf dem normalen HTML für modals einsetzen und verwenden Sie die Klassennamen pull-right und pull-left:
<div id="myModal" class="modal fade" tabindex="-1" role="dialog">
<img class="pull-left" src="YourLogo.png">
<div class="pull-right">Close-Ico</div>
<div class="modal-dialog">
<div class="modal-content">
....
prüfen dieses Beispiel http://www.bootply.com/AQafF1LaVw
Danke, das hat gut und einfach für mich funktioniert. Mir war nicht bewusst, dass ich Inhalte außerhalb des Modal-Dialog-Div platzieren kann. –
Sie könnten ein neues verstecktes Element in den Körper einfügen und es nur anzeigen, wenn der Hintergrund angezeigt wird. Die .modal-open wird nur auf das Body-Tag angewendet, wenn das Modal geöffnet ist.
.modal-open-inner {
display:none;
}
.modal-open .modal-open-inner {
display:block;
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
width:100%;
}
Können Sie nach Dein Code bitte? Aber vielleicht 'float: left' und' float: right' werden die Arbeit für Sie erledigen. –
Können Sie diese Elemente nicht in HTML einfügen? Warum Pseudo-Selektoren .... http: //www.bootply.com/AQafF1LaVw – DaniP