php 弹遮罩层,遮罩层 弹框 页面滚动

第一种情况比较简单，弹框和页面都不可滚动

this is a box

this is a box

this is a box

.mask{

position: fixed;

top: 0;

left: 0;

z-index: 999;

width: 100%;

height: 100%;

display: none;

background: rgba(0,0,0,.7);

}

.box{

position: absolute;

top: 50%;

left: 50%;

transform: translate3d(-50%, -50%, 0);

padding: 10px;

background: #fff;

text-align: center;

}

var oBtn = document.getElementById("btn"),

oMask = document.getElementById("mask"),

oBox = document.getElementById("box"),

oClose = document.getElementById("close");

oBtn.onclick = () => {

oMask.style.display = 'block';

}

oClose.onclick = () => {

oMask.style.display = 'none';

}

oMask.addEventListener('touchmove', (e) => {

e.preventDefault();

});

第二种情况是弹框可滚动，页面不可滚动

1.移动端兼容性不好，可应用于pc端

this is a box

this is a box

this is a box

this is a box

this is a box

this is a box

this is a box

.mask{

position: fixed;

top: 0;

left: 0;

z-index: 999;

width: 100%;

height: 100%;

display: none;

background: rgba(0,0,0,.7);

}

.box{

position: absolute;

top: 50%;

left: 50%;

transform: translate3d(-50%, -50%, 0);

width: 200px;

height: 200px;

padding: 10px;

overflow-y: scroll;

-webkit-overflow-scrolling : touch;

background: #fff;

text-align: center;

}

var oBtn = document.getElementById("btn"),

oMask = document.getElementById("mask"),

oBox = document.getElementById("box"),

oClose = document.getElementById("close");

oBtn.onclick = () => {

oMask.style.display = 'block';

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

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

document.documentElement.style.overflow='hidden'

}

oClose.onclick = () => {

oMask.style.display = 'none';

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

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

document.documentElement.style.overflow='scroll'

}

2.适用于移动端

this is a box

this is a box

this is a box

this is a box

this is a box

this is a box

this is a box

this is a box

.maskWrap{

position: fixed;

top: 0;

left: 0;

z-index: 999;

width: 100%;

height: 100%;

display: none;

}

.mask{

position: absolute;

top: 0;

left: 0;

bottom: 0;

right: 0;

z-index: 1;

background-color: rgba(0, 0, 0, .7);

}

.box{

position: absolute;

top: 50%;

left: 50%;

transform: translate3d(-50%, -50%, 0);

z-index: 2;

width: 200px;

height: 200px;

overflow-y: scroll;

-webkit-overflow-scrolling : touch;

padding: 10px;

background: #fff;

text-align: center;

}

var oBtn = document.getElementById("btn"),

oMaskWrap = document.getElementById("maskWrap"),

oMask = document.getElementById("mask"),

oBox = document.getElementById("box"),

oClose = document.getElementById("close");

oBtn.onclick = () => {

oMaskWrap.style.display = 'block';

}

oClose.onclick = () => {

oMaskWrap.style.display = 'none';

}

oMask.addEventListener('touchstart', (e) => {

e.preventDefault();

});

let startY = 0; // 记录开始滑动的坐标，用于判断滑动方向

let status = 0; // 0：未开始，1：已开始，2：滑动中

// 核心部分

oBox.addEventListener('touchstart', e => {

status = 1;

startY = e.targetTouches[0].pageY;

}, false);

oBox.addEventListener('touchmove', e => {

// 判定一次就够了

if (status !== 1) return;

status = 2;

let t = e.target || e.srcElement;

let py = e.targetTouches[0].pageY;

let ch = t.clientHeight; // 内容可视高度

let sh = t.scrollHeight; // 内容滚动高度

let st = t.scrollTop; // 当前滚动高度

// 已经到头部尽头了还要向上滑动，阻止它

if (st === 0 && py > startY) {

// console.log(st + '/' + py + '/' + startY);

e.preventDefault();

}

// 已经到低部尽头了还要向下滑动，阻止它

if ((st === sh - ch) && py < startY) {

// console.log(st + '/' + (sh - ch) + '/' + py + '/' + startY);

e.preventDefault();

}

}, false);

oBox.addEventListener('touchend', e => {

status = 0;

}, false);

3.适用于移动端和pc端

var oBtn = document.getElementById("btn"),

oMaskWrap = document.getElementById("maskWrap"),

oMask = document.getElementById("mask"),

oBox = document.getElementById("box"),

oClose = document.getElementById("close");

var isFixed = 0;

oBtn.onclick = () => {

oMaskWrap.style.display = 'block';

isFixed = 1;

}

oClose.onclick = () => {

oMaskWrap.style.display = 'none';

isFixed = 0;

}

var bodyEl = document.body;

var top = 0;

function stopBodyScroll (isFixed) {

console.log(isFixed)

if (isFixed) {

top = window.scrollY;

bodyEl.style.position = 'fixed';

bodyEl.style.top = -top + 'px';

} else {

bodyEl.style.position = '';

bodyEl.style.top = '';

window.scrollTo(0, top); // 回到原先的top

}

}

// window.onscroll = stopBodyScroll(isFixed);

document.addEventListener("onscroll", function (e) {

stopBodyScroll(isFixed);

})