Wie erstellt man ein modales Fenster mit Colorbox?

Das Hauptproblem bei modalen Fenstern ist das unterschiedliche Verhalten der Eigenschaft scrollTop auf iPhone und Android. Daher müssen wir eine lange Liste von Befehlen verwenden, um die scrollTop-Position zu ermitteln.

function setBodyUnscrollable(value) {
    // document.body.scrollTop funktioniert nicht in Chrome
    // https://stackoverflow.com/questions/28633221/document-body-scrolltop-firefox-returns-0-only-js
    // aber es funktioniert auf 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();
    });
  });