Twitter bootstrap kaydırılabilir modal

Üzerinde çalıştığım bir proje için twitter bootstrap kullanıyorum.

İçinde biraz daha uzun bir form olan kalıcı bir pencerem var ve pencere çok küçüldüğünde modalın kaydırılmamasından hoşlanmadım (kaydırılamayan sayfamdan kaybolduysa).

Bunu düzeltmek için aşağıdaki css'yi kullandım

.modal {
    overflow-y:auto;
    max-height:90%;
    margin-top:-45%;
}

Bu, Chrome'da tam olarak istediğim şekilde çalışıyor (yani, pencere yeterince büyük olduğunda form tam boyuttadır, ancak pencere küçüldükçe mod küçülür ve kaydırılabilir hale gelir). Sorun şu ki, IE'de modal ekran dışında. Bu soruna daha iyi bir çözümü olan var mı?

Örneğim tinyhousemap.com adresinde bulunabilir (modalin görünmesi için gezinme penceresinde 'Haritaya Giriş Ekle'yi tıklayın)

Teşekkürler

Aşağıdaki çözüme ne dersiniz? Benim için çalıştı. Bunu dene:

.modal .modal-body {
    max-height: 420px;
    overflow-y: auto;
}

Detaylar:

1. .modal sınıfından overflow-y: auto;veya kaldır overflow: auto;(önemli)
2. kaldırma max-height: 400px;ile ilgili .modalsınıfı (önemli)
3. Ekle max-height: 400px;için .modal .modal-gövdeyi (veya her ne olabilir 420pxveya daha az, ancak daha gitmezdim 450px)
4. ekle overflow-y: auto;için.modal .modal-body

Bitti, yalnızca gövde kaydırılacak.

Sadece jQuery kullanarak küçük bir çözüm yaptım.

Öncelikle, <div class="modal-body">benim "ativa-scroll" dediğime ek bir sınıf eklemeniz gerekir, böylece bu şöyle bir şey olur:

<div class="modal-body ativa-scroll">

Şimdi bu kod parçasını sayfanıza, JS yüklemenizin yanına koyun:

<script type="text/javascript">
  $(document).ready(ajustamodal);
  $(window).resize(ajustamodal);
  function ajustamodal() {
    var altura = $(window).height() - 155; //value corresponding to the modal heading + footer
    $(".ativa-scroll").css({"height":altura,"overflow-y":"auto"});
  }
</script>

Benim için mükemmel çalışıyorum, aynı zamanda duyarlı bir şekilde! :)

/* Important part */
.modal-dialog{
    overflow-y: initial !important
}
.modal-body{
    max-height: calc(100vh - 200px);
    overflow-y: auto;
}

Bu, JS kodu olmadan Bootstrap 3 için çalışır ve duyarlıdır.

Kaynak

Bootstrap'in:

 .modal {
position: fixed;

İle:

.modal {
position: absolute;

Benim için çalıştı.

Ben de ekledim

.modal { position: absolute; }

iletişim kutusunun kaydırılmasına izin vermek için stil sayfasına gidin, ancak kullanıcı uzun bir sayfanın en altına inmişse, modal görünen alanın üstünden gizlenebilir.

Bunun artık bootstrap 3'te bir sorun olmadığını anlıyorum, ancak yükseltme yapana kadar nispeten hızlı bir düzeltme aradım, yukarıdakileri ve modal'ı açmadan önce aşağıdakileri aradım.

$('.modal').css('top', $(document).scrollTop() + 50);

FireFox, Chrome, IE10 8 & 7'de (elime geçmem gereken tarayıcılar) mutlu görünüyor

Modaliniz firefox'ta gizleniyor ve bunun nedeni genel stil sayfanızdaki negatif marj beyanıdır:

.modal {
    margin-top: -45%; /* remove this */
    max-height: 90%;
    overflow-y: auto;
}

Negatif marjı kaldırın ve her şey yolunda gidiyor.

Kullanılması durumunda, gövde zaten taştığında .modal {overflow-y: auto;}sayfanın sağ tarafında ek kaydırma çubuğu oluşturur .

Bunun için çevrede çalışma kaldırmaktır taşma gelen vücut geçici etiketi ve set modal taşma-y için oto .

Misal:

$('.myModalSelector').on('show.bs.modal', function () {

        // Store initial body overflow value
        _initial_body_overflow = $('body').css('overflow');

        // Let modal be scrollable
        $(this).css('overflow-y', 'auto');
        $('body').css('overflow', 'hidden');


    }).on('hide.bs.modal', function () {

        // Reverse previous initialization
        $(this).css('overflow-y', 'hidden');
        $('body').css('overflow', _initial_body_overflow);
});

@ Grenoult'un CSS çözümündeki sorun (çoğunlukla işe yarıyor), klavye açıldığında (yani kalıcı iletişim kutusundaki bir girişi tıkladıklarında) tamamen duyarlı ve mobil cihazda ekran boyutu değişiyor ve kalıcı iletişim kutusu boyut değişiklikleri ve yeni tıkladıkları girişi gizleyebilir, böylece ne yazdıklarını göremezler.

Benim için daha iyi çözüm jquery'yi aşağıdaki gibi kullanmaktı:

$(".modal-body").css({ "max-height" : $(window).height() - 212, "overflow-y" : "auto" });

Pencere boyutunu değiştirmeye yanıt vermez, ancak bu zaten o kadar sık ​​olmaz.

.Modal-body öğesinde max-height ile "vh" metriğini kullanarak bunun üstesinden gelebildim. 70vh kullanımlarım için doğru görünüyordu. Ardından overflow-y'yi otomatik olarak ayarlayın, böylece yalnızca gerektiğinde kaydırılır.

.modal-body {
   overflow-y: auto;
   max-height: 70vh;
}

Bunların hiçbiri beklendiği gibi çalışmayacak .. Doğru yol pozisyon değiştirmektir: pozisyona sabitlenir: .modal sınıf için mutlak