移动端弹出层后禁止背景底层 body滚动 (part1)

(1)  这个只适用于桌面端

document.body.style.height='100%';

document.body.style.overflow='hidden';

(2)

// HTML

<div class="box"> <div class="box1"> </div> </div>

var box1 = $('.box1');

var body = document.body;

var scrolltop= 0;

body.addEventListener('click',function(){

   // box1.className.indexOf('hidden')!=-1

  if(box1.classList.contains('hidden')){

    // 保存页面滚动到的位置

    scrolltop = document.body.scrollTop;

    body.style.height = '100%';

    body.style.overflow='hidden';

    document.documentElement.style.height='100%';

    document.documentElement.style.overflow='hidden';

    //显示弹出层

    box1.className='box1 show';

  } else {

    //隐藏弹出层

    box1.className='box1 hidden';

    body.style.height='auto';

    body.style.overflow='visible';

    document.documentElement.style.height='auto';

    document.documentElement.style.overflow='visible';

    document.body.scrollTop = scrolltop;

      } 

},false);

原文地址:https://www.cnblogs.com/limingziqiang/p/8572204.html