Twitter Bootstrap modalını içeriğe göre dinamik olarak yeniden boyutlandırma

Youtube videoları, Vimeo videoları, metinler, Imgur resimleri gibi farklı veri türlerine sahip veritabanı içeriğim var. Hepsi farklı yükseklik ve genişliklere sahip. İnternette arama yaparken bulduğum tek şey boyutu tek bir parametreye değiştirmek. Pop-up'daki içerikle aynı olması gerekir.

Bu benim HTML kodum. Ayrıca içeriği aramak için Ajax kullanıyorum.

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

İçeriğinizin dinamik olması gerektiğinden, modalın css özelliklerini showvarsayılan özelliklerini geçersiz kılacak şekilde yeniden boyutlandıracak modal olayında dinamik olarak ayarlayabilirsiniz . Bootstrap olmanın nedeni, aşağıdaki gibi css kuralı ile modal gövdeye bir maksimum yükseklik uygular:

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

Böylece jquery cssyöntemini kullanarak dinamik olarak satır içi stilleri ekleyebilirsiniz :

Daha yeni bootstrap sürümleri için 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%'
       });
});

Daha eski önyükleme sürümleri için show

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

veya geçersiz kılmak için bir css kuralı kullanın:

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

ve bu sınıfı autoModalhedef kiplerinize ekleyin .

İçeriği keman içinde dinamik olarak değiştirin, modalin buna göre yeniden boyutlandırıldığını göreceksiniz. Demo

Daha yeni önyükleme sürümü mevcut event names.

• show.bs.modal Bu olay, gösteri örneği yöntemi çağrıldığında hemen tetiklenir . Bir tıklamadan kaynaklanıyorsa, tıklanan öğe, olayın relatedTarget özelliği olarak kullanılabilir.
• shown.bs.modal Bu olay, modal kullanıcı tarafından görünür hale getirildiğinde tetiklenir (CSS geçişlerinin tamamlanmasını bekler). Bir tıklamadan kaynaklanıyorsa, tıklanan öğe, olayın relatedTarget özelliği olarak kullanılabilir.
• hide.bs.modal Bu olay, hide örneği yöntemi çağrıldığında hemen tetiklenir.
• hidden.bs.modal Bu olay, modal kullanıcıdan gizlenmeyi bitirdiğinde tetiklenir (CSS geçişlerinin tamamlanmasını bekleyecektir).
• load.bs.modal Bu olay, modal uzak seçeneği kullanarak içerik yüklediğinde tetiklenir.

Daha eski önyükleme sürümü modal events desteklenir.

• Göster - Bu olay, gösteri örneği yöntemi çağrıldığında hemen tetiklenir.
• gösterilen - Bu olay, modal kullanıcı tarafından görünür hale getirildiğinde tetiklenir (css geçişlerinin tamamlanmasını bekler).
• hide - Bu olay, hide örneği yöntemi çağrıldığında hemen tetiklenir.
• hidden - Bu olay, modal kullanıcıdan gizlenmeyi bitirdiğinde tetiklenir (css geçişlerinin tamamlanmasını bekler).

Bu benim için çalıştı, yukarıdakilerin hiçbiri işe yaramadı.

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

PSL'nin cevabının benim için çalışmasını sağlayamadım, bu yüzden tek yapmam gereken, modal içeriği içeren div'i ayarlamak olduğunu öğrendim style="display: table;". Modal içeriğin kendisi ne kadar büyük olmak istediğini söyler ve modal onu barındırır.

Bunu yapmanın birçok yolu var eğer css yazmak istiyorsanız ve ardından aşağıdakileri ekleyin

.modal-dialog{
  display: table
}

Satır içi eklemek istemeniz durumunda

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

display:table;Modal içerik sınıfına eklemeyin . işinizi yaptı, ancak modalınızı büyük boyut için düzenleyin, aşağıdaki ekran görüntülerine bakın. ilk görüntü, kalıcı içeriğe stil eklerseniz kalıcı iletişim kutusuna stil eklerseniz. düzenlenmiş görünüyor.

bootstrap 3 için aşağıdaki gibi kullanın

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

Basit Css benim için çalışıyor

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

Basitçe css'yi geçersiz kılıyorum:

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

width:fit-contentmodal div üzerinde ayarlayın .

Bunu, gijgo.com'daki jquery iletişim eklentisini kullanırsanız ve genişliği otomatik olarak ayarlarsanız yapabilirsiniz.

$("#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>

Yeniden boyutlandırmayı true olarak ayarlarsanız, kullanıcıların boyutu kontrol etmesine de izin verebilirsiniz. Http://gijgo.com/Dialog/Demos/bootstrap-modal-resizable adresinde bununla ilgili bir demo görebilirsiniz.

Kipi dikey ve yatay olarak ortalayacak basit bir CSS çözümü:

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

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

Bootstrap 2 için Model yüksekliğini dinamik olarak otomatik ayarla

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

Bootstrap 3 ile aynı sorunu yaşadım ve modal-body div yüksekliği 442px'ten büyük olmak istemiyordu. Benim durumumda düzeltmek için gereken tüm css buydu:

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

Mine Solution sadece aşağıdaki stili eklemek içindi. <div class="modal-body" style="clear: both;overflow: hidden;">

Bootstrap 4 itibariyle - bir stile sahiptir:

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

bu nedenle, mod genişliğini biraz daha büyük olacak şekilde yeniden boyutlandırmak istiyorsanız, bunu css'nizde kullanmanızı öneririm, örneğin:

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

NotAyarın width: 87vw;bootstrap'leri geçersiz kılmayacağınımax-width: 500px; .

Araştırmam beni buraya getirdi, bu yüzden iki sent değerinde fikrim de ekleyebilir. Maymun dostu Twitter Bootstrap modelini kullanıyorsanız , bunun gibi bir şey yapabilirsiniz:

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

Bu yardımcı olur umarım.