it-swarm.com.de

wie kann ich die Standardposition von Modal in Bootstrap ändern?

<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 modale Standardposition in Bootstrap ändern, wo muss ich die Standardposition ändern?.

31
dpndra

Fügen Sie der HTML-Datei die folgende CSS-Datei hinzu und ändern Sie die Werte oben, rechts, unten und links.

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

Ich bekomme ein besseres Ergebnis, wenn Sie diese Klasse einstellen:

.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 Credits zu msnfreaky für die Idee ...)

10
Bamboomy

Um die modale Position im Ansichtsfenster zu ändern, können Sie die modale Div-ID als Ziel festlegen. In diesem Beispiel lautet 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;
}
3
V31

Ich weiß, dass es etwas spät ist, aber ich hatte Probleme mit einem modalen Fenster, das einige Links in der Menüleiste nicht zulässt, selbst wenn es nicht ausgelöst wurde. Aber ich habe es gelöst, indem ich Folgendes getan habe:

.modal{
display:none;
}
0
Rainman