Comment configurer Twitter bootstrap modal plus large et plus haut?

Bootstrap 3.1.1 ils ont ajouté modal-lg et modal-sm classes. Vous contrôlez l' modal taille à l'aide de @media interrogations comme elles le font. C'est un moyen de contrôler l' modal taille de l'.

@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>

Pour une taille en %, vous pourriez 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%; 
   }
}

la façon la plus facile de faire ceci est d'utiliser le .modal-lg. Ajouter à la modale-classe de boîte de dialogue à l'intérieur de la modale contenant de la sorte:

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

modifier la classe de modèle de boîte de dialogue a fait le tour pour moi

.modal-dialog {
    width: 90%;
}

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

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

dans votre HTML, ajoutez higherWider à l'intérieur de la chaîne de classe pour votre modal:

<div class="modal hide fade higherWider">

la réponse acceptée fonctionne bien, cependant je recommande d'utiliser le remplissage plutôt que la marge. De cette façon, vous conservez la fonctionnalité de rejet 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;
}

avec CSS:

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

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>

L'une ou l'autre des solutions suivantes a fonctionné pour moi:

1. Appliquer style="width: 50%; height:50%;"div dans la section modale avec le class="modal-dialog" comme

   <div class="modal-dialog" style="width: 50%; height:50%;">
   

   ou

2. Création d'une section style comme

    #themodal .modal-dialog{ width:50%; height:50%;}