H5界面底部彈窗顯示div，並禁止頁面滑動

animate.min.css  下載鏈接：https://pan.baidu.com/s/15-tgrbsm_yrOMbDJgUIltg
提取碼：whuc

實現效果：底部彈出div，並禁止頁面滑動

#mask2 {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 999;
	background: #666;
	opacity: 0.5;
	filter: alpha(opacity=50);
	-moz-opacity: 0.5;
	display: none;
}

.popup2 {
	position: absolute;;
	height: 430px;
	background: #fff;
	border-radius: 10px 10px 0 0;
	border: none;
	z-index: 1000;
	display: none;
	bottom: 0px;
}

<link rel="stylesheet" type="text/css" href="./css/animate.min.css">

<div id="mask2"> </div> <!-- 遮罩層  -->
<div class="popup2 " id="popup2">
<!-- 具體內容  -->
</div>


function apple_scroll() {

//背景遮罩
  $('#mask2').css({
    display: 'block',
    height: $(document).height(),
   
  })

//底部彈窗
  var $Popup2 = $('.popup2');
  $Popup2.css({
    
    bottom: $(window).scrollTop() * (-1) + 'px',

    display: 'block'
  })
  //向上滑出
  $('.popup2').addClass('animated fadeInUpBig');

  scrControl(0);

}


function bodyScroll(event) {
  event.preventDefault();
}

function scrControl(t) {
  if (t == 0) { //禁止滾動
    document.body.addEventListener('touchmove', this.bodyScroll, {
      passive: false
    });
  } else if (t == 1) { //開啓滾動
    document.body.removeEventListener('touchmove', this.bodyScroll, {
      passive: false
    });
  }
}