bootstrap modal kaydırma çubuğunu kaldırır

Sayfamda kalıcı bir görünümü tetiklediğimde, kaydırma çubuğunun kaybolmasını tetikliyor. Bu can sıkıcı bir etkidir çünkü modal içeri girdiğinde / kaybolduğunda arka plan sayfası hareket etmeye başlar. Bu etkinin tedavisi var mı?

Bu bir özelliktir, modal'ı gösterdiğinizde sınıf modal-openHTML'ye eklenir bodyve gizlediğinizde kaldırılır.

Bu, önyükleme css dediği için kaydırma çubuğunun kaybolmasına neden olur

.modal-open {
    overflow: hidden;
}

Bunu belirterek geçersiz kılabilirsiniz

.modal-open {
    overflow: scroll;
}

içinde kendi css.

Kalıtımın kaydırmadan daha iyi olduğunu düşünüyorum çünkü modal'ı açtığınızda her zaman kaydırma ile açılır, ancak herhangi bir parşömeniniz olmadığında aynı sorunu yaşarsınız. Bu yüzden sadece şunu yapıyorum:

.modal-open {
  overflow: inherit;
}

kullandım

.modal-open {
  overflow-y: scroll;
}

Bu durumda yatay kaydırma çubuğunu görüntülemekten kaçınırsınız

Overflow-y'yi kullanmak daha iyidir: gövdeden dolguyu kaydırın ve kaldırın, sayfa gövdesine önyükleme modal dolgu ekledi.

.modal-open {
  overflow:hidden;
  overflow-y:scroll;
  padding-right:0 !important;
}

IE tarayıcı Uyumlu: IE tarayıcısı varsayılan olarak aynı şeyi yapıyor.

Tanrıya şükür bu yazı karşısına geldim! Kendi yakın bağlantımı kullanarak pencereyi kapatırken kaydırma çubuklarını nasıl geri alacağımı anlamaya çalışırken saçımı çekiyordum. CSS için önerileri denedim ama düzgün çalışmıyordu. Okuduktan sonra

modal-open sınıfı, modal'ı gösterdiğinizde HTML gövdesine eklenir ve gizlediğinizde kaldırılır. - @flup

Jquery kullanarak bir çözüm buldum, bu yüzden başka birinin aynı sorunu yaşaması ve yukarıdaki öneriler işe yaramaması durumunda -

<script>
            jQuery(document).ready(function () {
jQuery('.closeit').click(function () {
 jQuery('body').removeClass('modal-open');
                });
            });
        </script>

Ben sadece Bootstrap modellerinin bu 'özelliği' ile oynuyordum. Görünüşe göre .modalsınıf varoverflow-y:auto; modal kendisi yüksek seviyesine hale geldiğinde kalıcı sarıcı kendi kaydırma çubuğunu alır Yani.

Her zaman bir kaydırma çubuğu istiyorsanız (tasarımcılar genellikle bunu yapar) Önce gövdeyi

body {
    overflow-y:scroll;
}

Sonra idare edin .modal-open

.modal-open .modal {
    overflow-y:scroll; /* Force a navbar on .modal */
}

.modal-open .topnavbar-wrapper {
    padding-right:17px; /* Noticed that right aligned navbar content got overlapped by the .modal scrollbar */
}

Bu durumda, gövde üzerinde kaydırma çubuğunu devre dışı bırakmayı dokunmadan bırakın

Bu sayfadaki diğer tüm cevaplar içeriğimi atlamaya devam etti.

Dikkat et!

Her ne kadar bu çözüm benim için her zaman işe yarasa da, dün modal sürüklenebilir olduğunda ve ekrana (dikey olarak) sığacak kadar büyük olduğunda bu düzeltmeyi kullanırken bir sorun yaşadım. position:stickyEklediğim öğelerle bir ilgisi olabilir mi?

Bot tuzağınızın belirli bir bölümünü özelleştirmek için kendi css dosyanızı oluşturacaksanız daha iyi.

Önyükleme css dosyasını değiştirmeyin, çünkü sayfanızın diğer bölümlerinde kullandığınızda önyüklemenizdeki her şeyi değiştirecektir.

Sayfanız biraz uzunsa, otomatik olarak bir kaydırma çubuğu sağlayacaktır. Modal açıldığında, kaydırma çubuğunu gizleyecektir çünkü önyükleme varsayılan olarak bunu yapar.

Modal açıldığında gizlemekten kaçınmak için, css kodunu (aşağıda) kendi css dosyanıza koyarak geçersiz kılmanız yeterlidir.

.modal-open {
    overflow: scroll;
}

tam tersi ...

.modal-open {
    overflow: hidden;
}

Ek olarak, kalıcı pop-up'ın içeriğin içinde kaydırılması gerekiyorsa ve üst öğenin hareketsiz kalması gerekiyorsa, aşağıdakileri Custom.css dosyanıza ekleyin (css'yi geçersiz kılma)

.modal-body {
    max-height: calc(100vh - 210px);
    overflow-y: auto;
}
.modal-open {
    overflow: hidden;
    overflow-y: scroll;
    padding-right: 0 !important;
}

Benim için işe yarayan tek cevap şudur:

.modal-open {
  padding-right: 0 !important;
}
html {
  overflow-y: scroll !important;
}

bootstrap modal açıldığında bir padding ekler, böylece bu kodu kendi css'nizde deneyebilirsiniz

.modal-open {
    padding: 0 !important;
}

Bu muhtemelen 1. modelin (kapatıldığında) gövde elemanından modal-açık sınıfını kaldırması ve ikincisinin tetik modal-açık olduğunda onu geri eklememesine neden olur.

Bu durumda, modun tamamen kapalı / gizlenmiş olup olmadığını kontrol etmek ve bir başkasını açmak için olayı kullanırım.

let modal1 = $('.modal1);
let modal2 = $('.modal2);
$modal1.on('hidden.bs.modal', function (e) {
   $modal2.modal('show');
});

Bu, modal-open'in gövdeden kaldırıldığından ve açıldığında yeniden eklendiğinden emin olmak için 1. modal kapanana kadar bekleyecektir.

Bu sorunu yeni yaşadım ve bu soruyu hızlı bir şekilde bulmak, davranışa neyin sebep olduğunu anlamama yardımcı oldu. Çok teşekkürler.

Ancak, bu CSS çözümlerini biraz uygunsuz buluyorum. Diğer bir deyişle, özellikle kaydırma çubuklarını tutmak istemediğiniz sürece (bunun için bir neden düşünemememe rağmen).

Esasen Bootstrap, kaydırma çubuğunun kaldırılmasını telafi etmek için belirli öğelere padding-right uyguluyor.

Bu nedenle, yapmanız gereken tek şey sorunlu öğenizin etrafına sıfır dolgulu fazladan bir sarmalayıcı koymaktır (ve hedeflenen sınıfı ona doğru hareket ettirmektir).

yani bundan değiş ...

<div class="fixed-top p-1 bg-dark">
    ...this content will move as padding will be modified...
</div>

... buna...

<div class="fixed-top p-0 bg-dark">
    <div class="p-1">
        ...this content won't move...
    </div>
</div>