Bootstrap 3 mod, seçmeli menüden

Question

seçimini yaptıktan sonra kayboluyor. Bir web uygulamasında, kullanıcıya siteye bilgi eklemek için dört adımlı bir işlemden geçen bir kayıt işlevim var. Bir kullanıcı 'Ekle' düğmesini tıkladığında, bir Önyükleme modeli görünür ve kullanıcı adım 1'den başlar.

Her adımda, bir kullanıcının seçebileceği seçenekler menüsü vardır ve her adımda doldurulan veriler önceki adımların seçeneklerine bağlıdır. Bir kullanıcı bir adım boş bırakabilir ve devam edebilir, ancak daha sonra işlemin geri kalanı için yapacak bir seçeneği yoktur. Bu işlevsellik, iPad'deki Safari haricinde her masaüstünde ve mobil tarayıcıda beklendiği gibi davranıyor.

Safari'de, kullanıcı modal'ı açar, 1. adımdaki verileri seçer ve 2. adıma geçer. Kullanıcı bu açılır menüden hiçbir şey seçmezse, 3. adıma devam edebilirler. 2. adımda seçim, modal kaybolur ve kullanıcı devam edemez. Bu sadece iPad/iPhone için Safari'de gerçekleşir.

iPad'de web denetçisini kurmayı ve konsolu bir Mac'e yüklemeyi denedim, ancak konsolda hata veya başka kullanım mesajları bulunmuyor. Bu, Safari'de bir hata olup olmadığını anlamaya çalışıyorum ya da Safari, başka bir tarayıcıdan farklı bir seçim etiketinden gelen girişleri işliyorsa.

Answer 1

Bir geliştirici arkadaşına bir göz atın.

jQuery.usingSafari = function(allowDevices){ 
allowDevices = allowDevices != undefined ? allowDevices : true; 
if(!allowDevices){ 
    return /iPhone|iPad|iPod|Safari/i.test(navigator.userAgent) 
     && navigator.userAgent.indexOf('Chrome') == -1 
     && navigator.userAgent.indexOf('iPhone') == -1 
     && navigator.userAgent.indexOf('iPad') == -1 
     && navigator.userAgent.indexOf('iPod') == -1; 
} else{ 
    var results = /iPhone|iPad|iPod|Safari/i.test(navigator.userAgent) && navigator.userAgent.indexOf('Chrome') == -1; 
    return results; 
} 

}

//Disable backdrop 
if(jQuery.usingSafari(false)) { 
document.write('<style>div.modal-backdrop{ display:none; }</style>'); 

}

Ve sonra kalıcı çağrısı:

jQuery('#player-lightbox').modal({ 
      backdrop: jQuery.usingSafari(true) ? "static" : true, 
      show:true} 
     ); 

Bu sorunu düzelttikten gibi görünmesine rağmen, bu fonksiyonu eklendi. Umarım bu başkalarına yardımcı olur!

Answer 2

Bu, fade geçişinden kaynaklanıyor gibi görünüyor. Uygulama iOS'ta çalışıyorsa, ardından .modal öğeleri için bir sorgu oluşturdu ve sınıf fade kaldırıldı. Bu, hem iPad/iPhone'da sorunu çözdü. Not: Modal zemin, bu klavyeyi sanal klavye içine girip çıkarıp güzel yapmak için biraz fazla çaba gerektirebilir.

göstermek için:

if(isIOS()) 
    $('.modal').removeClass('fade'); 

Edit: (yatay) iPad de ben bir seçim yapmak üzerine kaybolan bir kabın içinde bir Droplistesi ile benzer bir sorunu vardı ve bu oldu

$('.modal').on('shown.bs.modal', function() { 
    $(this).find('.modal-backdrop').css('position', 'absolute'); 
}); 

Answer 3

gerekli SADECE gerçek bir IPAD cihazında gerçekleşiyor ('IPAD' seçiliyken cihaz araç çubuğunda krom kontrolü] iyi çalıştı. Bu, yukarıdaki yorumda belirtildiği gibi bilinen bir hata gibi görünüyor.

Kabı için css'yi konumuna değiştirme: mutlak sorunu benim için çözdü. Ancak, diğer cihazlar & görünümleri için düzeni bozar.

düzeltme modifiye css kuralı ile yalnızca iPad'ler hedef vardı:

@media all and (device-width: 768px) and (device-height: 1024px) and (orientation:portrait) { 
    .your-container { 
    position: absolute; 
    } 
} 
@media all and (device-width: 768px) and (device-height: 1024px) and (orientation:landscape) { 
    .your-container { 
    position: absolute; 
    } 
}