Cara mengubah ukuran modal Twitter Bootstrap secara dinamis berdasarkan konten

Saya memiliki konten database yang memiliki tipe data berbeda, seperti video Youtube, video Vimeo, teks, gambar Imgur, dll. Semuanya memiliki tinggi dan lebar yang berbeda. Yang saya temukan saat mencari di Internet adalah mengubah ukuran menjadi hanya satu parameter. Itu harus sama dengan konten di popup.

Ini adalah kode HTML saya. Saya juga menggunakan Ajax untuk memanggil konten.

<div id="modal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
        <h3 id="ModalLabel"></h3>
    </div>
    <div class="modal-body">

    </div>
</div> 

Karena konten Anda harus dinamis, Anda dapat menyetel properti css dari modal secara dinamis pada showacara modal yang akan mengubah ukuran modal yang menimpa spesifikasi defaultnya. Alasan menjadi bootstrap menerapkan max-height ke badan modal dengan aturan css seperti di bawah ini:

.modal-body {
    position: relative;
    overflow-y: auto;
    max-height: 400px;
    padding: 15px;
}

Jadi Anda bisa menambahkan gaya sebaris secara dinamis menggunakan cssmetode jquery :

Untuk versi bootstrap yang lebih baru, gunakan show.bs.modal

$('#modal').on('show.bs.modal', function () {
       $(this).find('.modal-body').css({
              width:'auto', //probably not needed
              height:'auto', //probably not needed 
              'max-height':'100%'
       });
});

Untuk penggunaan bootstrap versi lama show

$('#modal').on('show', function () {
       $(this).find('.modal-body').css({
              width:'auto', //probably not needed
              height:'auto', //probably not needed 
              'max-height':'100%'
       });
});

atau gunakan aturan css untuk mengganti:

.autoModal.modal .modal-body{
    max-height: 100%;
}

dan tambahkan kelas ini autoModalke modal target Anda.

Ubah konten secara dinamis di biola, Anda akan melihat modal diubah ukurannya. Demo

Versi baru dari bootstrap lihat yang tersedia event names.

• show.bs.modal Peristiwa ini dijalankan segera ketika metode instance show dipanggil. Jika disebabkan oleh klik, elemen yang diklik tersedia sebagai properti relatedTarget dari peristiwa tersebut.
• shown.bs.modal Peristiwa ini dijalankan ketika modal telah dibuat terlihat oleh pengguna (akan menunggu transisi CSS selesai). Jika disebabkan oleh klik, elemen yang diklik tersedia sebagai properti relatedTarget dari peristiwa tersebut.
• hide.bs.modal Peristiwa ini dijalankan segera ketika metode instance hide telah dipanggil.
• hidden.bs.modal Peristiwa ini dijalankan ketika modal telah selesai disembunyikan dari pengguna (akan menunggu transisi CSS selesai).
• load.bs.modal Peristiwa ini dijalankan ketika modal telah memuat konten menggunakan opsi jarak jauh.

Versi lama dari bootstrap modal events didukung.

• Show - Event ini langsung aktif ketika metode show instance dipanggil.
• ditampilkan - Peristiwa ini dijalankan ketika modal telah dibuat terlihat oleh pengguna (akan menunggu transisi css selesai).
• sembunyikan - Peristiwa ini dijalankan segera ketika metode contoh sembunyikan telah dipanggil.
• tersembunyi - Peristiwa ini dijalankan ketika modal telah selesai disembunyikan dari pengguna (akan menunggu transisi css selesai).

Ini berhasil untuk saya, tidak satu pun di atas yang berhasil.

.modal-dialog{
    position: relative;
    display: table; /* This is important */ 
    overflow-y: auto;    
    overflow-x: auto;
    width: auto;
    min-width: 300px;   
}

Saya tidak bisa mendapatkan jawaban PSL yang berfungsi untuk saya, jadi saya menemukan yang harus saya lakukan hanyalah mengatur div yang memegang konten modal style="display: table;". Konten modal itu sendiri mengatakan seberapa besar keinginannya dan modal itu menampungnya.

Ada banyak cara untuk melakukan ini jika Anda ingin menulis css kemudian menambahkan yang berikut

.modal-dialog{
  display: table
}

Dalam kasus jika Anda ingin menambahkan sebaris

<div class="modal-dialog" style="display:table;">
//enter code here
</div>

Jangan tambahkan display:table;ke kelas modal-konten. itu melakukan pekerjaan Anda tetapi disposisi modal Anda untuk ukuran besar lihat tangkapan layar berikut. gambar pertama adalah jika Anda menambahkan gaya ke modal-dialog jika Anda menambahkan gaya ke modal-konten. itu terlihat disposisi.

untuk bootstrap 3 gunakan seperti

$('#myModal').on('hidden.bs.modal', function () {
// do something…
})

Css sederhana bekerja untuk saya

.modal-dialog { 
max-width : 100% ;
}

Saya hanya mengganti css:

.modal-dialog {
    max-width: 1000px;
}

atur width:fit-contentpada div modal.

Anda dapat melakukannya jika Anda menggunakan plugin dialog jquery dari gijgo.com dan menyetel lebarnya ke otomatis.

$("#dialog").dialog({
  uiLibrary: 'bootstrap',
  width: 'auto'
});

<html>
<head>
  <script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
  <link href="http://code.gijgo.com/1.0.0/css/gijgo.css" rel="stylesheet" type="text/css">
  <script src="http://code.gijgo.com/1.0.0/js/gijgo.js"></script>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
</head>
<body>
 <div id="dialog" title="Wikipedia">
   <img src="https://upload.wikimedia.org/wikipedia/en/thumb/8/80/Wikipedia-logo-v2.svg/1122px-Wikipedia-logo-v2.svg.png" width="320"/>
 </div>
</body>
</html>

Anda juga dapat mengizinkan pengguna untuk mengontrol ukuran jika Anda menyetel resizable ke true. Anda dapat melihat demo tentang ini di http://gijgo.com/Dialog/Demos/bootstrap-modal-resizable

Solusi CSS sederhana yang akan memusatkan modal secara vertikal dan horizontal:

.modal.show {
  display: flex !important;
  justify-content: center;
}

.modal-dialog {
  align-self: center;
}

Untuk Bootstrap 2 Otomatis menyesuaikan tinggi model secara dinamis

  //Auto adjust modal height on open 
  $('#modal').on('shown',function(){
     var offset = 0;
     $(this).find('.modal-body').attr('style','max-height:'+($(window).height()-offset)+'px !important;');
  });

Saya memiliki masalah yang sama dengan bootstrap 3 dan tinggi div modal-body tidak ingin lebih besar dari 442px. Ini semua css yang diperlukan untuk memperbaikinya dalam kasus saya:

.modal-body {
    overflow-y: auto;
}

Solusi Tambang hanya untuk menambahkan gaya di bawah ini. <div class="modal-body" style="clear: both;overflow: hidden;">

Pada Bootstrap 4 - ini memiliki gaya:

@media (min-width: 576px)
.modal-dialog {
    max-width: 500px;
}

jadi jika Anda ingin mengubah ukuran lebar modal menjadi beberapa lebar lebih besar, saya sarankan menggunakan ini di css Anda misalnya:

.modal-dialog { max-width: 87vw; }

Perhatikan bahwa pengaturan width: 87vw;tidak akan menggantikan bootstrap max-width: 500px;.

Pencarian saya membawa saya ke sini jadi sebaiknya saya menambahkan ide saya senilai dua sen. Jika Anda menggunakan modal Bootstrap Twitter yang ramah monyet, Anda dapat melakukan sesuatu seperti ini:

    var dialog = new BootstrapDialog({
        id: 'myDialog',
        title: 'Title',
        closable: false,
        // whatever you like configuration here...
    });

    dialog.realize();
    if (isContentAYoutubeVideo()) {
        dialog.getModalDialog().css('width', '80%'); // set the width to whatever you like
    }
    dialog.open();

Semoga ini membantu.