Hoe maak je een modaal venster met Colorbox

Het belangrijkste probleem bij modale vensters is het verschillende gedrag van de scrollTop-eigenschap op iPhone en Android. Daarom moeten we een reeks commando’s gebruiken om de juiste scrollTop-positie te bepalen.

function setBodyUnscrollable(value) {
    // document.body.scrollTop werkt niet in Chrome
    // https://stackoverflow.com/questions/28633221/document-body-scrolltop-firefox-returns-0-only-js
    // maar het werkt wel op 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();
    });
  });