METTRE À JOUR:

Dans bootstrap 3 vous devez modifier la boîte de dialogue modal. Donc, dans ce cas, vous pouvez ajouter la classe modal-admin dans le lieu où se trouve le modal-dialog .

Réponse d'origine (Bootstrap <3)

Y at-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 place le corps avant le sélecteur est qu'il faut une priorité plus élevée que la valeur par défaut. De cette façon, vous pouvez l'ajouter à un fichier CSS personnalisé, et sans souci de mise à jour Bootstrap.

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

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

Note 1: J'ai utilisé une .large classe, vous pourriez également le faire sur la normale .modal

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

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

Note 3: Dans Bootstrap 3 et 4, il existe une classe modal-lg . Donc, cela peut être suffisant, mais si vous voulez le rendre réactif, vous avez toujours besoin de la correction que j'ai fournie pour Bootstrap 3.

Dans certaines applications, fixed modes fixed sont utilisés, dans ce cas, vous pouvez essayer width:80%; left:10%; width:80%; left:10%; (Formule: gauche = 100 – largeur / 2)

Si vous utilisez Bootstrap 3, vous devez modifier la division de dialogue modal et non le div modal tel qu'il est indiqué dans la réponse acceptée. En outre, pour garder la nature réactive de Bootstrap 3, il est important d'écrire le CSS de substitution à l'aide d'une requête multimédia, de sorte que le modal sera largeur totale sur les appareils plus petits.

Voir cette JSFiddle pour expérimenter 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 % (eg 60%) or px (400px) */ } } 

Si vous voulez quelque chose qui ne brise pas le design relatif, 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" avant le sélecteur est de sorte qu'il prenne une priorité plus élevée que la valeur par défaut.

Dans Bootstrap 3+, le moyen le plus approprié de modifier la taille d'une boîte de dialogue modale est d'utiliser la propriété size. Voici un exemple, notez le modal-sm long de la classe de modal-dialog , indiquant un petit mode. Il peut contenir les valeurs sm pour small, md for medium et lg for large.

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

Pour Bootstrap 3 voici comment le faire.

Ajoutez un style modal-wide à votre balisage HTML (comme cela est adapté de l'exemple dans les documents 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'est pas nécessaire de remplacer la margin-left dans Bootstrap 3 pour que cela soit centré maintenant.

Dans Bootstrap 3, tout ce dont vous avez besoin, c'est ceci

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

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

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/js/bootstrap.min.js"></script> <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" /> <style> #myModal1 .modal-dialog { width: 80%; } #myModal2 .modal-dialog { width: 50%; } </style> <button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal1"> 80% </button> <button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal2"> 50% </button> <center> <!-- Modal --> <div class="modal fade" id="myModal1" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"> <div class="modal-dialog" role="document"> <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"> custom width : 80% </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> <!-- Modal --> <div class="modal fade" id="myModal2" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"> <div class="modal-dialog" role="document"> <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"> custom width : 50% </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> </center> 

Une 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); } }); 

Bootstrap 3: Afin de maintenir des fonctions réactives pour les petits et les petits périphériques, j'ai fait ce qui suit:

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

Dans v3 de Bootstrap, il existe une méthode simple pour rendre un modèle plus grand. 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"> 

Si Bootstrap> 3, ajoutez simplement un style à votre mode.

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

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 la publication où j'ai trouvé que: https://github.com/twitter/bootstrap/issues/675

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

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

Évidemment, vous pouvez modifier la taille de la largeur.

Essayez quelque chose comme le suivant (voir l'exemple de jsfiddle en direct 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>​ 

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

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

En modifiant le model-dialog classe model-dialog vous 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%; } 

Avec Bootstrap 3, tout ce qui est requis est une valeur de pourcentage donnée à la boîte de dialogue modal via CSS

CSS

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

Préservez la conception réactive, définissez la largeur sur ce que vous désirez.

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

Rester simple.

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

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

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

Et puis, 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); }); 

Écriture complète et code à http://scottpdawson.com/development/creating-a-variable-width-modal-dialog-using-bootstrap-3/

Dans Bootstrap 3 avec CSS, vous pouvez simplement utiliser:

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

Cela vous assure de ne pas casser la conception de la page, car nous utilisons .modal-dialog au lieu de .modal qui sera appliqué même à l'ombrage.

Plutôt que d'utiliser des pourcentages pour rendre sensible au mode, je trouve qu'il peut y avoir plus de contrôle à partir de l'utilisation des colonnes et d'autres éléments réactifs déjà intégrés dans bootstrap.

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

1) Ajoutez une division supplémentaire autour de la division de dialogue modal avec une classe de .container –

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

2) Ajoutez un peu de CSS pour rendre la largeur totale modal –

 .modal-dialog { width: 100% } 

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

 <div class="container"> <div class="modal-dialog modal-responsive"> </div> </div> .modal-responsive.modal-dialog { width: 100% } 

4) Ajouter une ligne / colonnes si vous voulez des modals 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> 

Ajoutez ce qui suit dans votre fichier css

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

Atteint le résultat attendu en utilisant,

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

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

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

Solution moins adaptée (no 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 souhaitez spécifier une largeur modale:

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

J'ai utilisé SCSS et le mode totalement 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; } } 

 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; } 

Ci-dessous le code pour définir la largeur pop-up modale et la position de gauche depuis l'écran via JavaScript.

$ ('# OpenModalPopupId'). Css ({"largeur": "80%", "gauche": "30%"});

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> 

Remarque J'ai ajouté .employeeModal class dans la seconde division. Ensuite, faites le style de cette classe.

 .employeeModal{ width: 700px; } 

 .Size(ModalSize.Large) sample: using (var modal = Html.Bootstrap().Begin(new Modal().Id("modalProject_" + modelItem.id).Closeable().Size(ModalSize.Large))) { }