JQModal يعرض بشكل غير صحيح في Safari المحمول

Question

لدي نافذة JQModal على موقعي الذي يحتوي على محتواه مكالمة AJAX. إنه يعمل بشكل جيد في جميع متصفحات سطح المكتب، لكنه يفشل في Safari المحمول على iPhone.

يتم عرض التراكب والنافذة نفسها في الجزء العلوي من نص الصفحة، بدلا من تغطية جهاز iPhone Viewport. إذا قمت بالتمرير لأعلى، يمكنك رؤية النافذة والتراكب في وضعه في أي متصفح آخر. هذا يمثل مشكلة خاصة لأنه، لمستخدم من Safari المحمول، بمجرد التمرير لأسفل وانقر فوق "سحب النافذة"، لا يوجد استجابة على الإطلاق - جزء من الشاشة مع نافذة مشروط غير مرئية تماما للمستخدم.

أنا متأكد من أن هذا لأن JQModal يستخدم "موقف": ثابت "في CSS، وهو effd على iPhone لأسباب مختلفة. إليك منشور مدون جيد يصف لماذا: http://doctyper.com/archives/200808/Fixed- On-Mobile-safari /

لقد بحثت في بعض المكتبات الأخرى لنظام Windows Modal (مثل Blockui) ولديها نفس المشكلة في Safari المحمول. هل يعرف أحد كيفية تعديل JQModal JS / CSS لإصلاح هذا؟ هتافات

Answer 1

ربما جرب شيئا من هذا القبيل لوضعه الموضع

عبر جون بريسبين

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');
 }

أضفت هذا إلى open وظيفة في jqmodal.js.

من محاولة التوضيحات التي تأتي مع simplemodal، يبدو أنها تعمل بشكل صحيح على جهاز iPad / iPhone حتى يكون الترحيل إلى ذلك هو الحل الآخر:http://www.ericmmartin.com/projects/simplemodal/