Aşağıdakileri denedim:

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

Ve bu Javascript:

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

Sonuç beklediğim gibi değil. Kalıcı üst sol ekranın ortasında konumlandırılmıştır.

Biri bana yardım edebilir mi. Bunu başkası denedi mi? Sanırım bunu yapmak alışılmadık bir şey değil.

GÜNCELLEME:

İçinde bootstrap 3kalıcı iletişim kutusunu değiştirmeniz gerekir. Yani bu durumda sınıfı modal-admin, bulunduğu yere ekleyebilirsiniz modal-dialog.

Orijinal Yanıt (Bootstrap <3)

JS / jQuery ile değiştirmeye çalışmanızın belirli bir nedeni var mı?

Bunu sadece CSS ile kolayca yapabilirsiniz, yani stilinizi belgede yapmak zorunda değilsiniz. Kendi özel CSS dosyanıza şunları eklersiniz:

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

Senin durumunda:

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

Vücudu seçiciden önce koymamın nedeni, varsayılandan daha yüksek bir öncelik almasıdır. Bu şekilde özel bir CSS dosyasına ekleyebilirsiniz ve endişelenmeden Bootstrap'ı güncelleyin.

Yalnızca CSS ile yanıt vermek istiyorsanız, şunu kullanın:

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

Not 1: Bir .largesınıf kullandım , bunu normalde de yapabilirsiniz.modal

Not 2: Bootstrap 3'te artık negatif kenar boşluğu gerekmeyebilir (kişisel olarak onaylanmamıştır)

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

Not 3: Bootstrap 3 ve 4'te bir modal-lgsınıf vardır. Bu yeterli olabilir, ancak yanıt vermek istiyorsanız, Bootstrap 3 için sağladığım düzeltmeye hala ihtiyacınız var.

Bazı uygulama fixedtürlerinde kullanılır, bu durumda deneyebilirsiniz width:80%; left:10%;(formula: left = 100 - width / 2)

Bootstrap 3 kullanıyorsanız, modal div'i kabul edilen cevapta gösterildiği gibi değiştirmemeniz gerekir. Ayrıca, Bootstrap 3'ün duyarlı doğasını korumak için, bir medya sorgusu kullanarak geçersiz kılma CSS'sinin yazılması önemlidir, böylece mod daha küçük cihazlarda tam genişlikte olur.

Farklı genişliklerde deneme yapmak için bu JSFiddle'a bakın .

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

Göreli tasarımı bozmayan bir şey istiyorsanız şunu deneyin:

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

@Marco Johannesen'in dediği gibi, seçiciden önceki “beden”, varsayılandan daha yüksek bir öncelik alır.

Bootstrap 3 ve sonraki sürümlerde, kalıcı iletişim kutusunun boyutunu değiştirmenin en uygun yolu size özelliğini kullanmaktır. Aşağıda bir örnek, sınıf modal-smboyunca modal-dialogküçük bir modal belirten dikkat edin . smKüçük, mdorta ve lgbüyük için değerleri içerebilir .

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

İşte Bootstrap 3nasıl yapılacağı.

modal-wideHTML işaretlemenize bir stil ekleyin ( Bootstrap 3 belgelerindeki örnekten uyarlandığı gibi )

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

ve aşağıdaki CSS'yi ekleyin

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

Geçersiz kılmaya gerek yok margin-left yılında Bootstrap 3bu şimdi merkezli olmak olsun.

In Bootstrap 3 tek ihtiyacınız bu

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

Yukarıdaki cevapların çoğu benim için işe yaramadı !!!

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

Çözüm bu sayfadan alındı

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

Bootstrap'ın v3'ünde bir kipin büyütülmesi için basit bir yöntem vardır. Modal-iletişim kutusunun yanına modal-lg sınıfını eklemeniz yeterlidir .

<!-- 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: Küçük ve çok küçük cihazların duyarlı özelliklerini korumak için aşağıdakileri yaptım:

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

Bunu yaptım, custom.css'de bu satırları ekledim ve hepsi buydu.

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

Açıkçası, genişliğin boyutunu değiştirebilirsiniz.

Bootstrap> 3 ise, modunuza stil ekleyin.

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

Benim için daha iyi çalışan bu çözümü buldum. Bunu kullanabilirsiniz:

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

veya bu gereksinimlerinize bağlı olarak:

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

Bunu bulduğum gönderiye bakın: https://github.com/twitter/bootstrap/issues/675

FYI Bootstrap 3 sol özelliği otomatik olarak işler. Dolayısıyla, bu CSS'yi eklemek genişliği değiştirecek ve ortalamasını koruyacaktır:

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

Duyarlı tasarımı koruyun, genişliği istediğiniz gibi ayarlayın.

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

Basit tutun.

Sınıfı değiştirerek model-dialogbeklenen sonucu elde edebilirsiniz. Bu küçük numaralar benim için çalışıyor. Umarım bu sorunu çözmenize yardımcı olacaktır.

.modal-dialog {
    width: 70%;
}

Bootstrap 3 ile gerekli olan tek şey, CSS aracılığıyla kalıcı diyalog penceresine verilen bir yüzde değeridir.

CSS

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

Bootstrap 3 kullanarak bir akışkan genişliği ve yüksekliği oluşturmak için bu sayfadaki ipuçlarıyla birlikte CSS ve jQuery kombinasyonunu kullandım.

İlk olarak, içerik alanı için genişlik ve isteğe bağlı kaydırma çubuğunu işlemek için bazı CSS'ler

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

Ve sonra gerekirse içerik alanının yüksekliğini ayarlamak için bazı jQuery

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

Tam yazma ve kod http://scottpdawson.com/development/creating-a-variable-width-modal-dialog-using-bootstrap-3/

In Bootstrap 3 CSS ile basitçe kullanabilirsiniz:

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

Bu, sayfanın tasarımını kırmamanızı sağlar, çünkü gölgelemeye bile uygulanacak .modal-dialogyerine kullanıyoruz .modal.

Aşağıdaki gibi bir şey deneyin (canlı jsfiddle örneğine buradan bakın: 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>​

Kipi duyarlı hale getirmek için yüzdeleri kullanmak yerine, zaten bootstrap içine yerleştirilmiş sütunları ve diğer duyarlı öğeleri kullanmaktan daha fazla kontrol olabileceğini görüyorum.

Kipi duyarlı hale getirmek / herhangi bir miktarda sütunun boyutunu yapmak için:

1) Kalıcı iletişim kutusu divının çevresine .container sınıfıyla fazladan bir div ekleyin -

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

2) Kipin tam genişliğini yapmak için biraz CSS ekleyin -

.modal-dialog {
    width: 100% }

3) Alternatif olarak başka çeşitleriniz varsa ekstra bir sınıfa ekleyin -

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

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

4) Çeşitli büyüklükteki modülleri istiyorsanız bir satır / sütun ekleyin -

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

Css dosyanıza aşağıdakileri ekleyin

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

Aşağıdaki Komut Dosyasını Kullanın:

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

  overflow-y: scroll;
}

Demo :

Bootstrap 4.1 için çözdüm

Önceden gönderilen çözümlerin karışımı

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

Kullanarak beklenen sonuç elde edildi,

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

Dikkat İkinci div .employeeModal sınıf ekledi. Sonra o sınıfı şekillendirin.

.employeeModal{
        width: 700px;
    }

Bu şekilde kullandım ve bu benim için mükemmel bir iş

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

Bootstrap 2 için daha az tabanlı çözüm (js yok):

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

Ardından, kalıcı bir genişlik belirtmek istediğiniz her yerde:

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

SCSS'yi ve tamamen duyarlı modal'ı kullandım:

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

veya

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