iPhone iOS Bootstrap Modal Hatası

Bootstrap Modal kullanırken sıkılıkla karşılaşılan sorunlardan bir tanesi, Modal penceresinin iPhone'da açılmamasıdır. Kodunuz Masaüstü cihazlarda ve Android telefonlarda çalışırken iPhone'da çalışmamasının nedeni büyük ihtimalle HTML veya CSS kodunuzun cihaz tarafında validasyondan geçememesidir. Bu durum özellikle Modal nesnesini trigger eden elementiniz buton yerine

a

etiketi ise yaşanır.

Birinci Yöntem: Prevent Default

Buradaki ilk muhtemel çözüm

a

etiketinize href vermektir. Bu durumda ortaya linke tıklaınca belirli bir adrese yönlendirme sorunu oluşur. İlk çözüm linkiniz varsayılan davranış biçimini değiştirmektir.

            $("a.modalaktivasyon").click(function (e) {
                e.preventDefault();
            });
    

İkinci Yöntem: Void Function

İkinci çözüm olarak href ile belirtilen yol olarak boş bir JavaScript çalıştırılabilir. Bu durumda void (boş) olan output,

return 0

gibi iş görür ve href engellenmiş olur. Aslına bakarsanız mantığı yukarıdaki çözüm ile aynıdır fakat bu çözüm diğerine nazaran daha hafif yüklü iken, önceki maddede bahsettiğim ilk yöntem daha programatikdir:

        < a href="javascript:;" class="modalaktivasyon" data-toggle="modal" data-target="#myModal">Modal Gelsin< /a>
    

veya

        < a href="javascript:void(0);" class="modalaktivasyon" data-toggle="modal" data-target="#myModal">Modal Gelsin< /a>
    

Üçüncü Yöntem: CSS Hack

Aslına bakarsanız bu kısım sadece tarayıcı ikna etmek içindir. Herhangi bir nedenden dolayı JavaScript kullanmak istememeniz halinde, CSS Hack ile çözüme ulaşmanız mümkündür. Normal şartlarda User-Agent'lar,

a

etiketi

href

taşımıyorsa, mouse cursor'unu pointer olarak atama yapmazlar. Bu durum, iPhone'un iligili bağlantının pasif olduğunu düşünmesine neden olmaktadır. Bundan dolayı modal eklediğimiz yere bir sınıf atıyarak, CSS'ini şu şekilde değiştirebiliriz:

            .modalaktivasyon {
                cursor: pointer;
            }