jqModal मोबाइल सफारी में गलत तरीके से प्रदर्शित

Question

मेरे पास मेरी साइट पर एक jQModal विंडो है जिसमें इसकी सामग्री अजाक्स कॉल द्वारा पॉप्युलेट की गई है। यह सभी डेस्कटॉप ब्राउज़र में ठीक काम करता है, लेकिन यह आईफोन पर मोबाइल सफारी में विफल रहता है।

आईफोन व्यूपोर्ट को कवर करने के बजाए ओवरले और खिड़की स्वयं पेज के बॉडी के शीर्ष पर प्रदर्शित होती है। यदि आप स्क्रॉल करते हैं, तो आप विंडो और ओवरले को किसी अन्य ब्राउज़र में स्थानांतरित कर सकते हैं। यह विशेष रूप से समस्याग्रस्त है क्योंकि, मोबाइल सफारी के उपयोगकर्ता के लिए, जब वे स्क्रॉल हो जाते हैं और मोडल विंडो खींचने के लिए क्लिक करते हैं, तो कोई प्रतिक्रिया नहीं होती है - मोडल विंडो के साथ स्क्रीन का हिस्सा उपयोगकर्ता के लिए पूरी तरह से अदृश्य है।

मुझे पूरा यकीन है कि यह इसलिए है क्योंकि jqModal अपने सीएसएस में "स्थिति: निश्चित" का उपयोग करता है, जो विभिन्न कारणों से आईफोन पर प्रभाव डालता है। यहां एक अच्छा ब्लॉग पोस्ट वर्णन किया गया है कि क्यों: http://doctyper.com/archives/200808/fixed-positioning-on-mobile-safari/

मैंने मोडल विंडोज़ (जैसे ब्लॉकयूआई) के लिए कुछ अन्य पुस्तकालयों को देखा है और उनके पास मोबाइल सफारी में भी यही समस्या है। क्या किसी को यह पता लगाने के लिए jqModal जेएस/सीएसएस को संशोधित करने के बारे में पता है? चीयर्स

Answer 1

शायद मोडल div को स्थिति देने के लिए ऐसा कुछ करने का प्रयास करें?

Via Jon Brisbin

function showModal() { 
    var win_y = $(window).height(); 
    var scroll_y = $(window).scrollTop(); 
    $("#modal_div").css({ top: scroll_y + "px" }); 
} 

var showTimer = false; 
function maybeShowModal(evt) { 
    if (showTimer) { 
    clearTimeout(showTimer); 
    } 
    showTimer = setTimeout(showModal, 175); 
} 

$(window).bind("scroll", maybeShowModal); 

Answer 2

यह एक हैक लेकिन चारों ओर सभ्य काम की तरह है। मैं jqmodal पेज के शीर्ष पर मोडल डाल दिखाई दे रही है, तो यह कोड केवल शीर्ष करने के लिए स्क्रॉल के बाद वे एक मॉडल खोलें:

if(navigator.userAgent.match(/iPhone/i) || 
    navigator.userAgent.match(/iPad/i) || 
    navigator.userAgent.match(/iPod/i) || 
    navigator.userAgent.match(/Android/i)){ 
    $('html, body').animate({scrollTop:0}, 'slow'); 
} 

मैं jqmodal.js में open समारोह को यह जोड़ा

क़ौम कि SimpleModal के साथ आते हैं की कोशिश कर रहा से, वे iPad/iPhone के पर सही ढंग से काम करने लगते हैं ताकि ओर पलायन एक और समाधान होगा: http://www.ericmmartin.com/projects/simplemodal/