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.

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.

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)

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) */
    }
}

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.

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>

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.

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

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

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

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

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

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

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

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

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.

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

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

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/

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.

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

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>

Ajoutez ce qui suit sur votre fichier css

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

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 :

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

Résultat attendu obtenu en utilisant,

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

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

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%'});

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

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

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