Saya mencoba yang berikut ini:

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

Dan Javascript ini:

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

Hasilnya bukan yang saya harapkan. Modal kiri atas diposisikan di tengah layar.

Ada yang bisa bantu saya. Adakah orang lain yang mencoba ini? Saya menganggap itu bukan hal yang aneh untuk dilakukan.

MEMPERBARUI:

Dalam bootstrap 3Anda perlu mengubah modal-dialog. Jadi dalam hal ini Anda dapat menambahkan kelas modal-admindi tempat modal-dialogberdiri.

Jawaban Asli (Bootstrap <3)

Apakah ada alasan tertentu Anda mencoba mengubahnya dengan JS / jQuery?

Anda dapat dengan mudah melakukannya hanya dengan CSS, yang berarti Anda tidak perlu melakukan gaya Anda dalam dokumen. Di file CSS kustom Anda sendiri, Anda menambahkan:

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

Dalam kasus Anda:

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

Alasan saya meletakkan tubuh di depan pemilih adalah agar dibutuhkan prioritas yang lebih tinggi daripada standar. Dengan cara ini Anda dapat menambahkannya ke file CSS khusus, dan tanpa khawatir perbarui Bootstrap.

Jika Anda ingin membuatnya responsif hanya dengan CSS, gunakan ini:

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

Catatan 1: Saya menggunakan .largekelas, Anda juga bisa melakukan ini secara normal.modal

Catatan 2: Dalam Bootstrap 3, margin-kiri negatif mungkin tidak diperlukan lagi (tidak dikonfirmasi secara pribadi)

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

Catatan 3: Di Bootstrap 3 dan 4, ada modal-lgkelas. Jadi ini mungkin cukup, tetapi jika Anda ingin membuatnya responsif, Anda masih memerlukan perbaikan yang saya berikan untuk Bootstrap 3.

Dalam beberapa fixedmodals aplikasi digunakan, dalam hal ini Anda dapat mencoba width:80%; left:10%;(rumus: kiri = 100 - lebar / 2)

Jika Anda menggunakan Bootstrap 3, Anda perlu mengubah modal-dialog div dan bukan modal itu seperti yang ditunjukkan dalam jawaban yang diterima. Juga, untuk menjaga sifat responsif Bootstrap 3, penting untuk menulis CSS override menggunakan kueri media sehingga modal akan menjadi lebar penuh pada perangkat yang lebih kecil.

Lihat JSFiddle ini untuk bereksperimen dengan lebar yang berbeda.

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

Jika Anda menginginkan sesuatu yang tidak merusak desain relatif coba ini:

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

Seperti, @Marco Johannesen mengatakan, "tubuh" sebelum pemilih adalah sehingga dibutuhkan prioritas yang lebih tinggi daripada standar.

Dalam Bootstrap 3+ cara yang paling tepat untuk mengubah ukuran dialog modal adalah dengan menggunakan properti ukuran. Di bawah ini adalah contoh, perhatikan modal-smsepanjang modal-dialogkelas, menunjukkan modal kecil. Ini bisa berisi nilai smuntuk kecil, mduntuk menengah dan lgbesar.

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

Untuk Bootstrap 3begini caranya.

Tambahkan modal-widegaya ke markup HTML Anda (seperti yang diadaptasi dari contoh dalam Bootstrap 3 docs )

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

dan tambahkan CSS berikut

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

Tidak perlu untuk menimpa margin-leftdalam Bootstrap 3untuk mendapatkan ini akan berpusat sekarang.

Di Bootstrap 3 yang Anda butuhkan adalah ini

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

Sebagian besar jawaban di atas tidak berhasil untuk saya !!!

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

Solusi diambil dari halaman ini

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

Di v3 dari Bootstrap ada metode sederhana untuk membuat modal lebih besar. Cukup tambahkan modal-lg di sebelah 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: Untuk menjaga fitur responsif untuk perangkat kecil dan ekstra kecil, saya melakukan hal berikut:

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

Inilah yang saya lakukan, di custom.css saya menambahkan baris ini dan itu saja.

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

Jelas, Anda dapat mengubah ukuran lebarnya.

Jika Bootstrap> 3, Cukup tambahkan gaya ke modal Anda.

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

Saya telah menemukan solusi ini yang bekerja lebih baik untuk saya. Anda bisa menggunakan ini:

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

atau ini tergantung kebutuhan Anda:

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

Lihat pos tempat saya menemukan itu: https://github.com/twitter/bootstrap/issues/675

FYI Bootstrap 3 menangani properti kiri secara otomatis. Jadi cukup menambahkan CSS ini akan mengubah lebar dan tetap di tengah:

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

Pertahankan desain responsif, atur lebar sesuai keinginan Anda.

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

Tetap sederhana.

Mengubah kelas model-dialogAnda dapat mencapai hasil yang diharapkan. Trik kecil ini bekerja untuk saya. Semoga ini akan membantu Anda untuk menyelesaikan masalah ini.

.modal-dialog {
    width: 70%;
}

Dengan Bootstrap 3, semua yang diperlukan adalah nilai persentase yang diberikan ke dialog modal melalui CSS

CSS

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

Saya menggunakan kombinasi CSS dan jQuery, bersama dengan petunjuk di halaman ini, untuk membuat lebar dan tinggi cairan menggunakan Bootstrap 3.

Pertama, beberapa CSS untuk menangani lebar dan scrollbar opsional untuk area konten

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

Dan kemudian beberapa jQuery untuk menyesuaikan ketinggian area konten jika diperlukan

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

Penulisan lengkap dan kode di http://scottpdawson.com/development/creating-a-variable-width-modal-dialog-using-bootstrap-3/

Di Bootstrap 3 dengan CSS Anda cukup menggunakan:

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

Ini memastikan Anda tidak merusak desain halaman, karena kami menggunakan .modal-dialogalih-alih .modalyang akan diterapkan bahkan pada bayangan.

Coba sesuatu seperti yang berikut ini (lihat contoh live jsfiddle di sini: 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>​

Daripada menggunakan persentase untuk membuat modal responsif, saya menemukan ada lebih banyak kontrol yang diambil dari menggunakan kolom dan elemen responsif lainnya yang sudah dibangun ke dalam bootstrap.

Untuk membuat modal responsif / ukuran jumlah kolom:

1) Tambahkan div tambahan di sekitar modal-dialog div dengan kelas .container -

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

2) Tambahkan sedikit CSS untuk membuat modal menjadi lebar penuh -

.modal-dialog {
    width: 100% }

3) Atau tambahkan kelas tambahan jika Anda memiliki modals lain -

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

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

4) Tambahkan baris / kolom jika Anda ingin berbagai ukuran modals -

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

Tambahkan berikut ini di file css Anda

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

Gunakan Skrip Di Bawah Ini:

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

  overflow-y: scroll;
}

Demo :

Saya memecahkannya untuk Bootstrap 4.1

Campuran dari solusi yang diposting sebelumnya

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

Mencapai hasil yang diharapkan menggunakan,

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

Perhatikan saya menambahkan .employeeModal class di div kedua. Kemudian gaya kelas itu.

.employeeModal{
        width: 700px;
    }

Saya menggunakan cara ini, dan itu berfungsi sempurna untuk saya

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

Solusi berbasis kurang (tidak ada js) untuk 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; }
    }
}

Lalu di mana pun Anda ingin menentukan lebar modal:

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

Saya menggunakan SCSS, dan modal yang sepenuhnya responsif:

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

atau

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