Comment puis-je modifier la largeur par défaut d'une boîte modale Twitter Bootstrap?


373

J'ai essayé ce qui suit:

   <div class="modal hide fade modal-admin" id="testModal" style="display: none;">
        <div class="modal-header">
          <a data-dismiss="modal" class="close">×</a>
          <h3 id='dialog-heading'></h3>
        </div>
        <div class="modal-body">
            <div id="dialog-data"></div>
        </div>
        <div class="modal-footer">
          <a data-dismiss="modal" class="btn" >Close</a>
          <a class="btn btn-primary" id="btnSaveChanges">Save changes</a>
        </div>
    </div>

Et ce Javascript:

    $('.modal-admin').css('width', '750px');
    $('.modal-admin').css('margin', '100px auto 100px auto');
    $('.modal-admin').modal('show')

Le résultat n'est pas ce que j'attendais. Le modal en haut à gauche est positionné au centre de l'écran.

Quelqu'un peut-il m'aider. Quelqu'un d'autre a-t-il essayé cela? Je suppose que ce n'est pas une chose inhabituelle de vouloir le faire.


Le plugin Bootstrap ne voit pas autant d'options. essayez de localiser la classe dans le fichier CSS d'amorçage et de voir si elle est définie via CSS, alors vous devriez pouvoir écraser ou au moins avoir une meilleure idée de quel élément il s'agit.
GillesC

3
Regardez la réponse de Nick N pour une très bonne réponse réactive! stackoverflow.com/a/16090509/539484
OnTheFly

Réponses:


373

MISE À JOUR:

Dans bootstrap 3vous devez changer la boîte de dialogue modale. Donc, dans ce cas, vous pouvez ajouter la classemodal-admin à l'endroit où modal-dialogse trouve.

Réponse originale (Bootstrap <3)

Y a-t-il une certaine raison pour laquelle vous essayez de le changer avec JS / jQuery?

Vous pouvez facilement le faire avec seulement CSS, ce qui signifie que vous n'avez pas à faire votre style dans le document. Dans votre propre fichier CSS personnalisé, vous ajoutez:

body .modal {
    /* new custom width */
    width: 560px;
    /* must be half of the width, minus scrollbar on the left (30px) */
    margin-left: -280px;
}

Dans ton cas:

body .modal-admin {
    /* new custom width */
    width: 750px;
    /* must be half of the width, minus scrollbar on the left (30px) */
    margin-left: -375px;
}

La raison pour laquelle je mets body avant le sélecteur est pour qu'il prenne une priorité plus élevée que la valeur par défaut. De cette façon, vous pouvez l'ajouter à un fichier CSS personnalisé et mettre à jour Bootstrap sans soucis.


2
Faites défiler ci-dessous pour une meilleure réponse (réactive) grâce à @NickN!
OnTheFly

1
@FloatingRock vous pouvez le rendre réactif, regardez ma réponse
Nick N.

1
@NickN. Tueur! Merci Nick
FloatingRock

47
Bootstrap 3 facilite cela. .modal .modal-dialog { width: 800px; }La position gauche est calculée automatiquement.
Gavin

1
En fait, cela ne fonctionne pas pour moi. La solution donnée en commentaire par @ZimSystem a fait l'affaire.
tonjo

270

Si vous voulez le rendre réactif avec seulement CSS, utilisez ceci:

.modal.large {
    width: 80%; /* respsonsive width */
    margin-left:-40%; /* width/2) */ 
}

Remarque 1: j'ai utilisé une .largeclasse, vous pouvez également le faire sur la normale.modal

Remarque 2: dans Bootstrap 3, la marge gauche gauche peut ne plus être nécessaire (non confirmée personnellement)

/*Bootstrap 3*/
.modal.large {
     width: 80%;
}

Remarque 3: Dans Bootstrap 3 et 4, il existe une modal-lgclasse. Cela peut donc être suffisant, mais si vous voulez le rendre réactif, vous avez toujours besoin du correctif que j'ai fourni pour Bootstrap 3.

Dans certains fixedmodaux d' application sont utilisés, dans ce cas, vous pouvez essayer width:80%; left:10%;(formule: gauche = 100 - largeur / 2)


Cela semble faire que le modal soit à moitié hors de l'écran sur des écrans très étroits.
cofiem

5
Cofiem, utilisez une requête média pour résoudre ce problème
Nick N.

1
@NickN. ma requête média ne l'a pas corrigé. Pouvez-vous ajouter un exemple? Mépris, je l'ai. J'avais max-width au lieu de min-width. @media (min-width: 400px) { body .modal-lrg{ width: 80%; /* respsonsive width */ margin-left:-40%; /* width/2) */ } }
HPWD

Je trouve que l'utilisation d'un% ne donne pas assez de contrôle comme le ferait l'utilisation des colonnes déjà intégrées au bootstrap.
Alex

@Alex Je pense que cela vous donne plus de contrôle, comment feriez-vous avec les colonnes existantes?
Nick N.

107

Si vous utilisez Bootstrap 3, vous devez modifier le div de dialogue modal et non le div modal comme il est indiqué dans la réponse acceptée. De plus, pour conserver la nature réactive de Bootstrap 3, il est important d'écrire le CSS de remplacement à l'aide d'une requête multimédia afin que le modal soit pleine largeur sur les petits appareils.

Voir ce JSFiddle pour expérimenter avec différentes largeurs.

HTML

<div class="modal fade">
    <div class="modal-dialog custom-class">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h3 class="modal-header-text">Text</h3>
            </div>
            <div class="modal-body">
                This is some text.
            </div>
            <div class="modal-footer">
                This is some text.
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

CSS

@media screen and (min-width: 768px) {
    .custom-class {
        width: 70%; /* either % (e.g. 60%) or px (400px) */
    }
}

3
corriger un pour bootstrap3. fonctionne sans adapter la marge! thx
SQueek

1
J'ai supprimé l'attribut id dans la réponse car ce n'est pas nécessaire.
arcdegree

cela fonctionne, mais il ne répond pas comme mlunoe ou Dave répond.
ksiomelo

80

Si vous voulez quelque chose qui ne casse pas la conception relative, essayez ceci:

body .modal {
  width: 90%; /* desired relative width */
  left: 5%; /* (100%-width)/2 */
  /* place center */
  margin-left:auto;
  margin-right:auto; 
}

Comme le dit @Marco Johannesen, le "corps" devant le sélecteur est tel qu'il a une priorité plus élevée que la valeur par défaut.


4
je recommande juste d'utiliser margin-left:auto; margin-right:auto;au lieu de autotout autour
cwd

dans certains cas, on pourrait avoir besoin top: 30%, le pourcentage en fonction du contenu à l'intérieur.
bool.dev

6
Cela fonctionne bien pour moi lorsque j'omet la règle .modal.fade.in, qui déplace le modal jusqu'en bas dans Bootstrap V2.2.2.
ramiro

1
Cela a fonctionné avec l'exemple modal ANGULAR-UI ... Il suffit de déposer le code dans un fichier css et de le charger dans la page ... angular-ui.github.io/bootstrap/#/modal ... Exécution de l'exemple sur plnkr.co / edit / GYmc9s? p = preview
Marcello de Sales

1
super cette solution fonctionne bien sur 2.3.2 bootstrap et MAIN dans internet explorer 8,9,10 !!!! solution avec marge gauche: -40% est incorrect dans internet explorer !!!
Cioxideru

41

Dans Bootstrap 3+, la façon la plus appropriée de modifier la taille d'une boîte de dialogue modale consiste à utiliser la propriété size. Voici un exemple, notez le modal-smlong de la modal-dialogclasse, indiquant un petit modal. Il peut contenir les valeurs smde petit, mdmoyen et lggrand.

<div class="modal fade" id="ww_vergeten" tabindex="-1" role="dialog" aria-labelledby="modal_title" aria-hidden="true">
  <div class="modal-dialog modal-sm"> <!-- property to determine size -->
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h4 class="modal-title" id="modal_title">Some modal</h4>
      </div>
      <div class="modal-body">

        <!-- modal content -->

      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-primary" id="some_button" data-loading-text="Loading...">Send</button>
      </div>
    </div>
  </div>
</div>

Ajouté à ma réponse :)
Tum

3
Cela ne devrait-il pas être la meilleure réponse? Je suppose que la première réponse pourrait vous aider à la personnaliser, mais la plupart des cas d'utilisation devraient être satisfaits par les classes intégrées de Bootstrap.
WebSpanner

J'utilise Bootstrap 3.x et je ne semble pas avoir de modal-mdclasse.
James Poulose

34

Pour Bootstrap 3 voici comment procéder.

Ajoutez un modal-widestyle à votre balisage HTML (adapté de l'exemple de la documentation Bootstrap 3 )

<div class="modal fade modal-wide" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h4 id="myModalLabel" class="modal-title">Modal title</h4>
      </div>
      <div class="modal-body">
        <p>One fine body&hellip;</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><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

et ajoutez le CSS suivant

.modal-wide .modal-dialog {
  width: 80%; /* or whatever you wish */
}

Il n'y a pas besoin de passer outre margin-leftà Bootstrap 3pour que cela soit centré maintenant.


3
Pour éviter toute confusion, il n'y a aucune raison technique d'ajouter la modal-wideclasse, ce qui signifie qu'il ne s'agit pas d'une classe Bootstrap "interne". Vous pouvez simplement faire#myModal .modal-dialog { width: 80%; }
Gavin

1
Oui. Mais le faire comme un style le rend plus réutilisable.
Dave Sag

2
Oui je comprends. C'est juste plusieurs fois qu'il est difficile de faire la différence entre une classe bootstrap et une classe personnalisée, donc je voulais en prendre note.
Gavin

20

Dans Bootstrap 3, vous n'avez besoin que de ceci

<style>
    .modal .modal-dialog { width: 80%; }
</style>

La plupart des réponses ci-dessus n'ont pas fonctionné pour moi !!!


Savez-vous comment changer la hauteur modale? Merci pour votre réponse, cela fonctionne comme un charme :)
FrenkyB

17

La solution a été prise à partir de cette page

$('#feedback-modal').modal({
    backdrop: true,
    keyboard: true
}).css({
    width: 'auto',
    'margin-left': function () {
        return -($(this).width() / 2);
    }
});

15

Dans la v3 de Bootstrap, il existe une méthode simple pour agrandir un modal. Ajoutez simplement la classe modal-lg à côté de modal-dialog.

<!-- My Modal Popup -->
<div id="MyWidePopup" class="modal fade" role="dialog">
    <div class="modal-dialog modal-lg"> <---------------------RIGHT HERE!!
        <!-- Modal content-->
        <div class="modal-content">

Pourquoi le vote négatif?! Cela m'a absolument et proprement donné une belle boîte de dialogue large! Et n'utilise que des classes de bootstrap "appropriées"!
Dave

Essayez de reprendre certains de vos éléments HTML - utilisez la structure la plus simple possible pour le tester.
Dave

13

Bootstrap 3: Afin de maintenir des fonctionnalités réactives pour les petits et très petits appareils, j'ai fait ce qui suit:

@media (min-width: 768px) {
.modal-dialog-wide
{ width: 750px;/* your width */ }
}

c'est juste. cela fonctionne pour moi. n'oubliez pas de changer la propriété width en XX% pour une mise en page réactive. Btw, la version dans mon cas est 3.0.3
Jerry Chen

7

C'est ce que j'ai fait, dans mon custom.css j'ai ajouté ces lignes et c'est tout.

.modal-lg {
    width: 600px!important;
    margin: 0 auto;
}

De toute évidence, vous pouvez modifier la taille de la largeur.


7

Si Bootstrap> 3, ajoutez simplement du style à votre modal.

<div class="modal-dialog" style="width:80%;">
  <div class="modal-content">
  </div>
</div>

6

J'ai trouvé cette solution qui fonctionne mieux pour moi. Vous pouvez utiliser ceci:

$('.modal').css({
  'width': function () { 
    return ($(document).width() * .9) + 'px';  
  },
  'margin-left': function () { 
    return -($(this).width() / 2); 
  }
});

ou ceci selon vos besoins:

$('.modal').css({
  width: 'auto',
  'margin-left': function () {
     return -($(this).width() / 2);
  }
});

Voir le post où j'ai trouvé cela: https://github.com/twitter/bootstrap/issues/675


5

FYI Bootstrap 3 gère automatiquement la propriété de gauche. Donc, simplement ajouter ce CSS changera la largeur et la gardera centrée:

.modal .modal-dialog { width: 800px; }

A travaillé pour B3! Merci beaucoup!
Bagata

4

Préservez le design réactif, réglez la largeur à votre guise.

.modal-content {
  margin-left: auto;
  margin-right: auto;
  max-width: 360px;
}

Rester simple.


4

En modifiant la classe, model-dialogvous pouvez obtenir le résultat attendu. Ces petites astuces fonctionnent pour moi. J'espère que cela vous aidera à résoudre ce problème.

.modal-dialog {
    width: 70%;
}

3

Avec Bootstrap 3, tout ce qui est requis est un pourcentage donné à la boîte de dialogue modale via CSS

CSS

#alertModal .modal-dialog{
     width: 20%;
}

1
oui, le rasoir de l'occam va à celui-ci. testé sur 3.0 fonctionne très bien
Gui de Guinetik

3

J'ai utilisé une combinaison de CSS et de jQuery, ainsi que des conseils sur cette page, pour créer une largeur et une hauteur fluides à l'aide de Bootstrap 3.

Tout d'abord, du CSS pour gérer la largeur et la barre de défilement facultative pour la zone de contenu

.modal.modal-wide .modal-dialog {
  width: 90%;
}
.modal-wide .modal-body {
  overflow-y: auto;
}

Et puis quelques jQuery pour ajuster la hauteur de la zone de contenu si nécessaire

$(".modal-wide").on("show.bs.modal", function() {
  var height = $(window).height() - 200;
  $(this).find(".modal-body").css("max-height", height);
});

Rédaction complète et code sur http://scottpdawson.com/development/creating-a-variable-width-modal-dialog-using-bootstrap-3/


3

Dans Bootstrap 3 avec CSS, vous pouvez simplement utiliser:

body .modal-dialog {
    /* percentage of page width */
    width: 40%;
}

Cela garantit que vous ne cassez pas la conception de la page, car nous utilisons .modal-dialogau lieu de celui .modalqui sera appliqué même à l'ombrage.


2

Essayez quelque chose comme ceci (voir l'exemple en direct de jsfiddle ici: http://jsfiddle.net/periklis/hEThw/1/ )

<a class="btn" onclick = "$('#myModal').modal('show');$('#myModal').css('width', '100px').css('margin-left','auto').css('margin-right','auto');" ref="#myModal" >Launch Modal</a>
<div class="modal" id="myModal" style = "display:none">
  <div class="modal-header">
    <a class="close" data-dismiss="modal">×</a>
    <h3>Modal header</h3>
  </div>
  <div class="modal-body">
    <p>One fine body…</p>
  </div>
  <div class="modal-footer">
    <a href="#" class="btn">Close</a>
    <a href="#" class="btn btn-primary">Save changes</a>
  </div>
</div>​

2

Plutôt que d'utiliser des pourcentages pour rendre le modal réactif, je trouve qu'il peut y avoir plus de contrôle en utilisant les colonnes et autres éléments réactifs déjà intégrés au bootstrap.


Pour rendre le modal réactif / la taille de n'importe quelle quantité de colonnes:

1) Ajoutez un div supplémentaire autour du div modal-dialog avec une classe de .container -

<div class="container">
    <div class="modal-dialog">
    </div>
</div>


2) Ajoutez un peu de CSS pour rendre le modal pleine largeur -

.modal-dialog {
    width: 100% }


3) Vous pouvez également ajouter une classe supplémentaire si vous avez d'autres modaux -

<div class="container">
    <div class="modal-dialog modal-responsive">
    </div>
</div>

.modal-responsive.modal-dialog {
    width: 100% }


4) Ajoutez une ligne / colonnes si vous voulez des modaux de différentes tailles -

<div class="container">
  <div class="row">
    <div class="col-md-4">
      <div class="modal-dialog modal-responsive">
       ...
      </div>
    </div>
  </div>
</div>

2

Ajoutez ce qui suit sur votre fichier css

.popover{
         width:auto !important; 
         max-width:445px !important; 
         min-width:200px !important;
       }

2

Utiliser le script ci-dessous:

.modal {
  --widthOfModal: 98%;
  width: var(--widthOfModal) !important;
  margin-left: calc(calc(var(--widthOfModal) / 2) * (-1)) !important;
  height: 92%;

  overflow-y: scroll;
}

Démo :

Démo sur gif


2

Je l'ai résolu pour Bootstrap 4.1

Mélange de solutions précédemment publiées

.modal-lg {
  max-width: 90% !important; /* desired relative width */
  margin-left:auto !important;
  margin-right:auto !important;
}


1

Résultat attendu obtenu en utilisant,

.modal-dialog {
    width: 41% !important;
}

1

Bootstrap 3.xx

   <!-- Modal -->
<div class="modal fade" id="employeeBasicDetails" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog modal-sm employeeModal" role="document">

        <form>

        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="myModalLabel">Modal Title</h4>
            </div>

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

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

        </form>

    </div>
</div>

Notez que j'ai ajouté la classe .employeeModal dans la deuxième division. Puis stylisez cette classe.

.employeeModal{
        width: 700px;
    }

capture d'écran de l'extrait de code


0

J'ai utilisé de cette façon, et c'est un travail parfait pour moi

$("#my-modal")
.modal("toggle")
.css({'width': '80%', 'margin-left':'auto', 'margin-right':'auto', 'left':'10%'});

0

Solution moins basée (pas de js) pour Bootstrap 2:

.modal-width(@modalWidth) {
    width: @modalWidth;
    margin-left: -@modalWidth/2;

    @media (max-width: @modalWidth) {
        position: fixed;
        top:   20px;
        left:  20px;
        right: 20px;
        width: auto;
        margin: 0;
        &.fade  { top: -100px; }
        &.fade.in { top: 20px; }
    }
}

Ensuite, où vous voulez spécifier une largeur modale:

#myModal {
    .modal-width(700px);
}

0

J'ai utilisé SCSS et le modal entièrement réactif:

.modal-dialog.large {
    @media (min-width: $screen-sm-min) { width:500px; }
    @media (min-width: $screen-md-min) { width:700px; }
    @media (min-width: $screen-lg-min) { width:850px; }
} 

0
you can use any prefix or postfix name for modal. but you need to make sure that's should use everywhere with same prefix/postfix name.    

body .modal-nk {
        /* new custom width */
        width: 560px;
        /* must be half of the width, minus scrollbar on the left (30px) */
        margin-left: -280px;
    }

ou

body .nk-modal {
            /* new custom width */
            width: 560px;
            /* must be half of the width, minus scrollbar on the left (30px) */
            margin-left: -280px;
        }
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.