Wie ändere ich die Standardposition von Modal im Bootstrap?

<div class="modal"> 
    <div class="modal-dialog"> 
    <div class="modal-content"> 

     <div class="modal-header"> 
     <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> 
     <h4 class="modal-title">Modal title</h4> 
     </div> 

     <div class="modal-body"> 
     <p>One fine body…</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> 
    </div> 
</div>

Wie kann ich die standardmäßige modale Position im Bootstrap ändern, wo sollte ich ändern, um die Standardposition zu ändern?Wie ändere ich die Standardposition von Modal im Bootstrap?

Quelle

2014-07-14 dpndra

http: //stackoverflow.com/questions/18053408/vertically-centering-bootstrap-modal-window ... könnte für Sie hilfreich sein. –

Fügen Sie den folgenden CSS zu Ihrem HTML und versuchen, die Spitze zu ändern, rechts, unten , linke Werte.

.modal { 
    position: absolute; 
    top: 10px; 
    right: 100px; 
    bottom: 0; 
    left: 0; 
    z-index: 10040; 
    overflow: auto; 
    overflow-y: auto; 
}

Quelle

2014-07-14 07:20:46 msnfreaky

wie kann er den Hintergrund des modalen transparent anstelle des schwarzen machen. – dpndra

Opazität: 1; oder addclass 'fade' – msnfreaky

gibt es keine Möglichkeit, die schwarze transparente Farbe zu entfernen und das Modal ohne Effekt erscheinen zu lassen, was ist, wenn ich nur das Modal ohne Wirkung sehen möchte? – dpndra

Um die Modal Position im Ansichtsfenster ändern Sie die Modal div id Ziel kann in diesem Beispiel wird diese ID myModal3

<div id="modal3" class="modal"> 
    <div class="modal-dialog"> 
    <div class="modal-content"> 
     <div class="modal-header"> 
     <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> 
     <h4 class="modal-title">Modal title</h4> 
     </div> 
     <div class="modal-body"> 
     <p>One fine body…</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> 
    </div> 
</div> 


#myModal3 { 
top:5%; 
right:50%; 
outline: none; 
overflow:hidden; 
}

Quelle

2014-07-14 07:15:03 V31

Seitenleiste in der Mitte wie wir es verstecken – dpndra

haben Überlauf: versteckt in der CSS. Aktualisiert die CSS-Klasse # myModal3 – V31

ich ein besseres Ergebnis dieser Klasse setzen:

.modal-dialog { 
    position: absolute; 
    top: 50px; 
    right: 100px; 
    bottom: 0; 
    left: 0; 
    z-index: 10040; 
    overflow: auto; 
    overflow-y: auto; 
}

mit Bootstrap 3.3.7.

(alle Kredite für die Idee msnfreaky ...)

Quelle

2016-08-13 00:38:43 Bamboomy

Wie ändere ich die Standardposition von Modal im Bootstrap?

Antwort

Verwandte Themen