web-dev-qa-db-fra.com

comment changer le positionnement par défaut de modal dans 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>

comment puis-je changer la position modale par défaut dans bootstrap, où devrais-je modifier pour changer la position par défaut.

javascriptcsscss3twitter-bootstrap
31
dpndra

Ajoutez le fichier CSS suivant à votre code HTML et essayez de modifier les valeurs supérieure, droite, inférieure et gauche.

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

J'obtiens un meilleur résultat en définissant cette classe:

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

Avec bootstrap 3.3.7.

(tous les crédits à msnfreaky pour l'idée ...)

10
Bamboomy

Pour modifier la position modale dans la fenêtre d'affichage, vous pouvez cibler l'identifiant div modal. Dans cet exemple, cet identifiant est 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

Je sais que c'est un peu tard, mais une fenêtre modale ne permettait pas à certains liens de la barre de menus de fonctionner même si cela ne s'était pas déclenché. Mais je l'ai résolu en procédant comme suit:

.modal{
display:none;
}
0
Rainman