Próbowałem następujące:

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

I ten Javascript:

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

Wynik nie jest tym, czego się spodziewałem. Modalny górny lewy jest umieszczony na środku ekranu.

Czy ktoś może mi pomóc. Czy ktoś jeszcze tego próbował? Zakładam, że nie jest niczym niezwykłym chcieć.

AKTUALIZACJA:

W bootstrap 3musisz zmienić modalne okno dialogowe. W takim przypadku możesz dodać klasę modal-adminw miejscu, w którym modal-dialogstoi.

Oryginalna odpowiedź (Bootstrap <3)

Czy istnieje jakiś powód, dla którego próbujesz to zmienić za pomocą JS / jQuery?

Możesz to łatwo zrobić za pomocą CSS, co oznacza, że ​​nie musisz stylizować dokumentu. We własnym niestandardowym pliku CSS dodajesz:

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

W Twoim przypadku:

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

Powodem, dla którego umieściłem body przed selektorem jest to, że ma on wyższy priorytet niż domyślny. W ten sposób możesz dodać go do niestandardowego pliku CSS i bez obaw aktualizować Bootstrap.

Jeśli chcesz sprawić, by był responsywny za pomocą CSS, użyj tego:

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

Uwaga 1: Użyłem .largeklasy, możesz to zrobić normalnie.modal

Uwaga 2: W Bootstrap 3 ujemny lewy margines może nie być już potrzebny (niepotwierdzony osobiście)

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

Uwaga 3: W Bootstrap 3 i 4 istnieje modal-lgklasa. Może to być wystarczające, ale jeśli chcesz sprawić, by było responsywne, nadal potrzebujesz poprawki, którą dostarczyłem dla Bootstrap 3.

W niektórych zastosowanych fixedmodach aplikacji możesz spróbować width:80%; left:10%;(formuła: left = 100 - width / 2)

Jeśli używasz Bootstrap 3, musisz zmienić div modal-dialog, a nie div modal, tak jak pokazano w zaakceptowanej odpowiedzi. Ponadto, aby zachować responsywną naturę Bootstrap 3, ważne jest, aby napisać zastąpienie CSS za pomocą zapytania o media, aby modal był pełnej szerokości na mniejszych urządzeniach.

Zobacz ten JSFiddle, aby eksperymentować z różnymi szerokościami.

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

Jeśli chcesz czegoś, co nie psuje względnego projektu, spróbuj tego:

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

Jak mówi @Marco Johannesen, „ciało” przed selektorem ma wyższy priorytet niż domyślny.

W Bootstrap 3+ najbardziej odpowiednim sposobem zmiany rozmiaru modalnego okna dialogowego jest użycie właściwości size. Poniżej znajduje się przykład, zwróć uwagę modal-smna modal-dialogklasę, wskazując na mały modal. Może zawierać wartości smdla małych, mdśrednich i lgdużych.

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

Dla Bootstrap 3oto jak to zrobić.

Dodaj modal-widestyl do znaczników HTML (dostosowany z przykładu w dokumentacji 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 -->

i dodaj następujący CSS

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

Nie ma potrzeby, aby zastąpić margin-leftw Bootstrap 3celu uzyskania tego, aby być teraz wyśrodkowany.

W Bootstrap 3 wszystko czego potrzebujesz to

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

Większość powyższych odpowiedzi nie zadziałała dla mnie !!!

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

Rozwiązanie zostało pobrane z tej strony

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

W v3 Bootstrap istnieje prosta metoda na powiększenie modalu. Po prostu dodaj klasę modal-lg obok 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: Aby zachować responsywne funkcje dla małych i bardzo małych urządzeń, wykonałem następujące czynności:

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

Tak właśnie zrobiłem w moim custom.css dodałem te linie i to wszystko.

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

Oczywiście możesz zmienić rozmiar szerokości.

Jeśli Bootstrap> 3, po prostu dodaj styl do swojego modalu.

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

Znalazłem to rozwiązanie, które działa dla mnie lepiej. Możesz użyć tego:

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

lub to w zależności od twoich wymagań:

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

Zobacz post, w którym znalazłem: https://github.com/twitter/bootstrap/issues/675

FYI Bootstrap 3 automatycznie obsługuje lewą właściwość. Po prostu dodanie tego CSS zmieni szerokość i utrzyma ją w środku:

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

Zachowaj responsywny design, ustaw szerokość zgodnie z oczekiwaniami.

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

Nie komplikuj.

Zmieniając klasę model-dialog, możesz osiągnąć oczekiwany wynik. Te małe sztuczki działają dla mnie. Mam nadzieję, że pomoże ci rozwiązać ten problem.

.modal-dialog {
    width: 70%;
}

W przypadku Bootstrap 3 wymagana jest jedynie wartość procentowa podawana do modalnego okna dialogowego za pomocą CSS

CSS

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

Użyłem kombinacji CSS i jQuery, wraz ze wskazówkami na tej stronie, aby stworzyć szerokość i wysokość płynu za pomocą Bootstrap 3.

Po pierwsze, niektóre CSS do obsługi szerokości i opcjonalny pasek przewijania dla obszaru zawartości

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

A potem trochę jQuery, aby w razie potrzeby dostosować wysokość obszaru zawartości

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

Pełny zapis i kod na stronie http://scottpdawson.com/development/creating-a-variable-width-modal-dialog-using-bootstrap-3/

W Bootstrap 3 z CSS możesz po prostu użyć:

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

Gwarantuje to, że nie zepsujesz projektu strony, ponieważ używamy .modal-dialogzamiast tego, .modalktóry zostanie zastosowany nawet do cieniowania.

Spróbuj czegoś takiego (patrz przykład jsfiddle na żywo tutaj: 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>​

Uważam, że zamiast wykorzystywać wartości procentowe do reagowania modalnego, można uzyskać większą kontrolę nad używaniem kolumn i innych responsywnych elementów już wbudowanych w bootstrap.

Aby modal reagował / wielkość dowolnej liczby kolumn:

1) Dodaj dodatkowy div wokół div modal-dialog z klasą .container -

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

2) Dodaj trochę CSS, aby modalna pełna szerokość -

.modal-dialog {
    width: 100% }

3) Ewentualnie dodaj dodatkową klasę, jeśli masz inne moduły -

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

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

4) Dodaj w rzędzie / kolumnach, jeśli chcesz mieć różne rozmiary modów -

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

Dodaj następujące elementy do pliku css

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

Użyj poniżej skryptu:

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

  overflow-y: scroll;
}

Demo :

Rozwiązałem go dla Bootstrap 4.1

Mieszanka wcześniej opublikowanych rozwiązań

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

Osiągnięto oczekiwany wynik za pomocą,

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

Zauważ, że dodałem klasę .employeeModal w drugim dziale. Następnie styl tej klasy.

.employeeModal{
        width: 700px;
    }

Użyłem tego sposobu i jest to dla mnie idealne rozwiązanie

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

Mniej oparte rozwiązanie (bez js) dla 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; }
    }
}

Następnie, gdziekolwiek chcesz określić szerokość modalną:

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

Użyłem SCSS i w pełni responsywnego modalu:

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

lub

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