Bagaimana saya bisa mengubah lebar default dari kotak modal Bootstrap Twitter?


373

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.


Plugin Bootstrap tidak memiliki banyak opsi. cobalah untuk menemukan kelas dalam file CSS bootstrap dan lihat apakah itu diatur melalui CSS, maka Anda harus dapat menimpa atau setidaknya akan memiliki petunjuk yang lebih baik tentang elemen mana itu.
GillesC

3
Lihatlah jawaban dari Nick N untuk jawaban responsif yang sangat bagus! stackoverflow.com/a/16090509/539484
OnTheFly

Jawaban:


373

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.


2
Gulir ke bawah untuk jawaban yang lebih baik (responsif) berkat @NickN!
OnTheFly

1
@ FloatingRock Anda dapat membuatnya responsif, lihat jawaban saya
Nick N.

1
@NickN. Pembunuh! Terima kasih Nick
FloatingRock

47
Bootstrap 3 membuat ini lebih mudah. .modal .modal-dialog { width: 800px; }Posisi kiri dihitung secara otomatis.
Gavin

1
Sebenarnya, ini tidak berhasil untuk saya. Solusi yang diberikan dalam komentar oleh @ZimSystem melakukan trik.
tonjo

270

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)


Ini tampaknya menyebabkan modal menjadi setengah dari layar pada layar yang sangat sempit.
cofiem

5
Cofiem, gunakan kueri media untuk memperbaikinya
Nick N.

1
@NickN. permintaan media saya tidak memperbaikinya. Bisakah Anda menambahkan contoh? Abaikan, saya mengerti. Saya memiliki max-width bukan min-width. @media (min-width: 400px) { body .modal-lrg{ width: 80%; /* respsonsive width */ margin-left:-40%; /* width/2) */ } }
HPWD

Saya menemukan hanya menggunakan% tidak memberikan kontrol yang cukup seperti menggunakan kolom yang sudah dibangun ke dalam bootstrap.
Alex

@Alex Saya pikir itu memberi Anda lebih banyak kontrol, bagaimana Anda melakukannya dengan kolom yang ada?
Nick N.

107

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

3
yang benar untuk bootstrap3. bekerja tanpa mengadaptasi margin! thx
SQueek

1
Saya menghapus atribut id dalam jawaban karena itu tidak perlu.
arcdegree

itu bekerja, tetapi tidak responsif sebagai mlunoe atau Dave menjawab.
ksiomelo

80

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.


4
Saya sarankan hanya menggunakan margin-left:auto; margin-right:auto;bukannya autosemua jalan di sekitar
cwd

dalam beberapa kasus seseorang mungkin perlu top: 30%, persentase tergantung pada konten di dalamnya.
bool.dev

6
Ini berfungsi dengan baik untuk saya ketika saya menghilangkan aturan .modal.fade.in, yang memindahkan modal sampai ke bawah di Bootstrap V2.2.2.
ramiro

1
Ini bekerja dengan contoh modal ANGULAR-UI ... Cukup masukkan kode dalam file css dan muat di halaman ... angular-ui.github.io/bootstrap/#/modal ... Menjalankan contoh di plnkr.co / edit / GYmc9s? p = pratinjau
Marcello de Sales

1
hebatnya solusi ini bekerja dengan baik pada 2.3.2 bootstrap dan MAIN di internet explorer 8,9,10 !!!! solusi dengan margin-kiri: -40% salah di internet explorer !!!
Cioxideru

41

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>

Menambahkannya ke jawaban saya :)
Tum

3
Tidakkah ini menjadi jawaban teratas? Saya kira jawaban teratas dapat membantu Anda menyesuaikannya tetapi kebanyakan kasus penggunaan harus dipenuhi oleh kelas bawaan Bootstrap.
WebSpanner

Saya menggunakan Bootstrap 3.x dan sepertinya saya tidak memiliki modal-mdkelas.
James Poulose

34

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.


3
Hanya untuk menghindari kebingungan, tidak ada alasan teknis untuk menambahkan modal-widekelas, yang berarti bahwa itu bukan kelas "internal" Bootstrap. Anda bisa melakukannya#myModal .modal-dialog { width: 80%; }
Gavin

1
Ya. Tetapi melakukannya sebagai gaya membuatnya lebih dapat digunakan kembali.
Dave Sag

2
Ya saya mengerti. Hanya saja beberapa kali sulit untuk membedakan antara kelas bootstrap dan kelas kustom, jadi saya ingin mencatatnya.
Gavin

20

Di Bootstrap 3 yang Anda butuhkan adalah ini

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

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


Apakah Anda tahu cara mengubah tinggi modal? Terima kasih atas jawaban Anda, ini berfungsi seperti pesona :)
FrenkyB

17

Solusi diambil dari halaman ini

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

15

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

Mengapa memilih? Benar-benar, dan bersih, memberi saya kotak dialog lebar yang bagus! Dan hanya menggunakan kelas bootstrap "benar"!
Dave

Coba kembali beberapa elemen HTML Anda - gunakan struktur paling sederhana yang Anda bisa untuk mengujinya.
Dave

13

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

itu benar. ini bekerja untuk saya. jangan lupa untuk mengubah properti lebar menjadi XX% untuk tata letak responsif. Btw, versi dalam kasus saya adalah 3.0.3
Jerry Chen

7

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.


7

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

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

6

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


5

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

Bekerja untuk B3! Terima kasih banyak!
Bagata

4

Pertahankan desain responsif, atur lebar sesuai keinginan Anda.

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

Tetap sederhana.


4

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

3

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

CSS

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

1
ya, pisau okor pergi ke yang satu ini. diuji pada 3.0 bekerja dengan baik
Gui de Guinetik

3

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/


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.


2

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

2

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>

2

Tambahkan berikut ini di file css Anda

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

2

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 :

Demo di gif


2

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


1

Mencapai hasil yang diharapkan menggunakan,

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

1

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

tangkapan layar cuplikan kode


0

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

0

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

0

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

0
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;
        }
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.