Bootstrap Modal açıldığında ana html gövdenin kaymasını önleme

https://codepen.io/geoffgraham/pen/KLGKqJ şu adreste senaryosunu görebileceğiniz durum söz konusu olabiliyor.

https://codepen.io/geoffgraham/pen/LogERe bu adreste bu senaryonun önlenmiş hali. var.

Uzun bir listenin içersinde ve sayfanın aşağılarında iken modal açıldığında scroll yukarı kayıyor. Son kullanıcı için sinir bozucu bir durum. Bunu önlemenin yolu tabi ki var. Çözüm aşağıdadır.

// Not: Modal açılma olayında
var documentScrollTop = $(document).scrollTop();
               
 $(document).on('scroll.noScroll', function() {
           $(document).scrollTop(documentScrollTop);
           return false;
});
            
// modal kapanma olayında

$(document).off('scroll.noScroll');

Kullandığım botstrap Modal açma yöntemi

$("#modalId").modal({
                  backdrop: 'static',
                  keyboard: true,
                  show: true 
            });

keyboard: true,

keyboard olursa esc butonu ile modalın açılıp kapanmasını engelleyebilir yada izin verebilirsiniz.

Ad Inserter.

backdrop: ‘static’,

backdrop propertysine static değeri verirseniz boşluğu tıklamayla modalın kapanmasını engellersiniz…


Categories: ,

Bir yanıt yazın

E-posta adresiniz yayınlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir