如何使用 Colorbox 创建模态窗口（How to make a modal window with Colorbox）

模态窗口的主要问题在于 scrollTop 属性在 iPhone 和 Android 上的行为不同。因此，我们需要使用一长串命令来准确获取滚动位置。

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

以上脚本通过监听 Colorbox 的打开和关闭事件，实现了在打开模态窗口时禁止页面滚动的效果，并确保在不同设备（尤其是 iPhone）上表现一致。