Colorbox के साथ एक मोडल विंडो कैसे बनाएं

मोडल विंडो (modal windows) की मुख्य समस्या यह है कि scrollTop प्रॉपर्टी iPhone और Android पर अलग-अलग व्यवहार करती है। इसलिए हमें scrollTop स्थिति प्राप्त करने के लिए कई कमांड्स का उपयोग करना पड़ता है।

function setBodyUnscrollable(value) {
    // document.body.scrollTop Chrome में काम नहीं करता
    // https://stackoverflow.com/questions/28633221/document-body-scrolltop-firefox-returns-0-only-js
    // लेकिन यह iPhone में काम करता है
    if (value) bodyScrollTop = document.body.scrollTop;
    document.body.style.overflow = (value) ? 'hidden' : '';
    document.body.style.position = (value) ? 'fixed' : '';
    document.body.style.left = (value) ?  '0' : '';
    document.body.style.right = (value) ?  '0' : '';
    document.body.style.top = (value) ? -bodyScrollTop + 'px' : '';
    if (!value) document.body.scrollTop = bodyScrollTop;
  }

  $(document).on('cbox_open', function(){

    var userAgent = navigator.userAgent || navigator.vendor || window.opera;
    if (/iPad|iPhone|iPod/.test(userAgent) && !window.MSStream) {
      setBodyUnscrollable(true);
    }
    else {
      $('body').css({overflow:'hidden'});
    }

  }).on('cbox_closed', function(){
    var userAgent = navigator.userAgent || navigator.vendor || window.opera;
    if (/iPad|iPhone|iPod/.test(userAgent) && !window.MSStream) {
      setBodyUnscrollable(false);
    }
    else {
      $('body').css({overflow:'auto'});
    }
  });

  $(document).on('cbox_complete', function() {
    $('#cboxContent .return-to-apartments-list a').on('click touchstart', function(e) {
      e.stopPropagation();
      e.preventDefault();
      $.colorbox.close();
    });
  });