Birkaç gün önce paylaştığım Bootstrap ve Modal Popup Kullanımı Hazır Kodları uygulamasından sonra sık sık lazım olan bir diğer modal popup uygulamasından bahsetmek istiyorum. Mesela kullanıcıya bir konuda bir uyarı gösterdiniz (reklam engelleyicinizi kapatın ya da KVKK onayını verin gibi) ve kullanıcı bu uygulamayı gerçekleştirip sayfayu yeniden başlatıncaya kadar sayfa içeriğinin bir pop-up ile bloke edilmesini istiyorsunuz. Bir pop-up nasıl kapatılabilir önce bunları bir sıralayalım, sonra da bu yolları teker teker kapatmaya çalışalım.
1. Klavyeden escape tuşuna basmak
2. Sayfada popup dışında bir yere tıklamak
3. Popup'taki kapat ya da çarpı tuşlarına basmak
4. Sayfa kaynak kodlarından popup'ı silmek ya da gizlemek (bu konuda maalesef yapabileceğimiz bir şey yok, belki belirli aralıklarla popup'ın tekrar görünür olmasını sağlayan bir javascript yazılabilir)
Elbette kullanıcı kapamayacağı bir pop-up'ı bir butona tıklayarak açmayacağı için bu pop-up'ın sayfa açılışında otomatik açılması gerekiyor.
Gelelim kodları paylaşmaya:
<body>
<div class="modal fade" tabindex="-1" role="dialog" id="popupReitix">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-body">
<p>Bu pop-up kapatılamaz</p>
</div>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script type="text/javascript">
$(window).on('load',function(){
$('#popupReitix').modal({backdrop: 'static', keyboard: false})
});
</script>
</body>