web-dev-qa-db-fra.com

Comment définir Twitter bootstrap modal plus large et plus haut?

Comment définir Twitter bootstrap modal plus large et plus haut?

Exemple ici (cliquez ici: Lancer la démo modale):

http://Twitter.github.com/bootstrap/javascript.html#modals

javascriptcsstwitter-bootstrapsizebootstrap-modal
37
mamasi

Si votre identifiant modal est "myModal"

Vous pouvez essayer d'ajouter un style comme:

#myModal 
{
    width: 700px; 
    margin-top: -300px !important;
    margin-left:  -350px !important; 
} 

#myModal .modal-body {
    max-height: 525px;
}
27
Mate

Dans Bootstrap 3.1.1 ils ont ajouté modal-lg et modal-sm Des classes. Vous contrôlez la taille modal en utilisant @media questions comme ils le font. C'est un moyen plus global de contrôler la taille de modal.

@media (min-width: 992px) {
    .modal-lg {
        width: 900px;
        height: 900px; /* control height here */
    }
}

Exemple de code:

<!-- Large modal -->
<button class="btn btn-primary" data-toggle="modal" data-target=".bs-example-modal-lg">Large modal</button>

<div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      ...
    </div>
  </div>
</div>

<!-- Small modal -->
<button class="btn btn-primary" data-toggle="modal" data-target=".bs-example-modal-sm">Small modal</button>

<div class="modal fade bs-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-sm">
    <div class="modal-content">
      ...
    </div>
  </div>
</div>
54
Leniel Maccaferri

Pour ce faire, le plus simple consiste à utiliser le fichier .modal-lg. Ajoutez-le à la classe de dialogue modal dans le conteneur modal comme suit:

<div class="modal fade">
    <div class="modal-dialog modal-lg" role="document">
            <div class="modal-content">
                I am now wider!
            </div>
    </div>
</div>
13
Vogon Jeltz

Pour une taille en%, vous pouvez faire ceci:

.modal-body
{
   max-height:80%;
}
.modal
{
   height:80%;
   width:70%;
   margin-left: -35%; 
}
@media (max-width: 768px) {
   .modal
   {
    width:90%;
        margin-left: 2%; 
   }
}
10
c-toesca

modifier le dialogue modal de classe a fait l'affaire pour moi

.modal-dialog {
    width: 90%;
}
9
Wishper

Dans votre fichier css, ajoutez une nouvelle définition de classe:

.higherWider {
    width:970px;
    margin-top:-250px;
}

Dans votre code HTML, ajoutez higherWider dans la chaîne de classe de votre modal:

<div class="modal hide fade higherWider">
5
Austin Mullins

La réponse acceptée fonctionne bien, mais je recommanderais d'utiliser un rembourrage plutôt que la marge. De cette façon, vous conservez la fonctionnalité de suppression lorsque vous cliquez en dehors de la boîte de dialogue modale.

#myModal {
    width: 700px; 
    padding-top: -300px !important;
    padding-left: -350px !important; 
} 

#myModal .modal-body {
    max-height: 525px;
}
4
A. Walker

css:

.modal-lg, .modal-sm {
    min-width: 90%;
}

code:

<!-- The Modal -->
<div class="modal fade" id="myModal">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">

            <!-- Modal Header -->
            <div class="modal-header">
                <h4 class="modal-title">Modal Heading</h4>
                <button type="button" class="close" data-dismiss="modal">&times;</button>
            </div>

            <!-- Modal body -->
            <div class="modal-body">
                Modal body..
            </div>

            <!-- Modal footer -->
            <div class="modal-footer">
                <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
            </div>

        </div>
    </div>
</div>
2
Akın Köker

Avec CSS:

.modal {
    width: 900px;
    margin-left: -450px; // half of the width
}
1
dfsq