logo

Paleta - Deixe colorido🎨

Palette — Construtor visual de páginas. Não precisa ser designer.

Demonstração ao vivo Baixar Palette

Scroll

Como criar janela modal com Colorbox

02/07/2018, by Ivan

The main problem of modal windows is different behavior for scrollTop property in iphone and android. So we need to use long list of commands to find scrollTop position. 

function setBodyUnscrollable(value) {
    // document.body.scrollTop doesn't work in chrome
    // https://stackoverflow.com/questions/28633221/document-body-scrolltop-firefox-returns-0-only-js
    // but it works in 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();
    });
  });

 

Tags