Html

Css

Js

弹出层去除背景滚动--原生版

使用js构建的弹出层类，使用new的方式实例化，传入的参数为：

{

el: "触发元素，click触发弹出层",

content: "弹出层内容",

time: 0 // 显示持续时间

}

使用 passive 事件和overflow:hidden;禁止滚动。完美兼容PC和移动端。

main content

Popup

Popup 500

body {

margin:0;

}

h2,p {

padding:0 10px;

}

.main {

height:1000px;

background:#f63;

background:-webkit-linear-gradient(top,#f8f8f8,#f63);

padding:10px;

}

.btn-popup {

padding:0 10px;

height:40px;

line-height:40px;

background:#f63;

font-weight:600;

border:none;

outline:none;

color:#333;

border-radius:4px;

cursor:pointer;

font-size:16px;

-webkit-tap-highlight-color:transparent;

}

code {

background:#ddd;

padding:2px 5px;

border-radius:2px;

color:#333;

white-space:pre-wrap;

display:inline-block;

margin:0 10px;

}

/****************** css for layer /*******************/

.layer {

position:fixed;

overflow:auto;

top:0;

left:0;

right:0;

bottom:0;

background:#666;

background:rgba(0,0,0,0.8);

z-index:100001;

display:none;

-webkit-will-change:background;

will-change:background;

}

.layer-content {

text-align:center;

color:#333;

font-size:0.9em;

padding:0 5px;

display:inline-block;

width:40%;

max-width:200px;

height:80px;

line-height:80px;

background:#fff;

position:absolute;

top:50%;

left:50%;

-webkit-transform:translate(-50%,-50%);

transform:translate(-50%,-50%);

border-radius:5px;

}

.layer-content>div {

overflow:hidden;

white-space:nowrap;

text-overflow:ellipsis;

}

.lock {

overflow:hidden;

touch-action:none;

}

.lock body {

overflow:hidden;

touch-action:none;

margin-right:17px;

}

.lock.mobile body {

margin-right:0;

}

function PopupLayer(options) {

this.eles = [];

this.times = [];

this.contents = [];

this.time = 0;

this.animation = false;

this.isMobile = navigator.userAgent.match(/(iPhone|iPod|Android|ios)/i);

if(this.isMobile){

document.querySelector("html").classList.add("mobile");

}

// init layer

var html = '

';

this.layer = document.createElement('div');

this.layer.className = "layer J_layer";

this.layer.innerHTML = html;

document.body.appendChild(this.layer);

this.addElement = function(ele_options){

if(!ele_options.ele){

console.log("need ele option.");

return;

}

// init trigger element

document.querySelector(ele_options.ele).classList.add("J_popup");

this.times.push(ele_options.time);

this.eles.push(ele_options.ele);

this.contents.push(ele_options.content);

};

this.forbidScroll = function(e) {

e.preventDefault && e.preventDefault();

e.returnValue = false;

e.stopPropagation && e.stopPropagation();

return false;

}

var me = this;

this.toggleShow = function(){

var now = +new Date();

if(now-1){

document.querySelector(".layer-content .content").innerText = me.contents[index];

me.time = me.times[index];

break;

}

}

me.showLayer();

if(me.time){

setTimeout(function(){

me.hideLayer();

},me.time+me.trans_time);

}

} else if (e.target.classList.contains("J_layer")) {

me.hideLayer();

}

});

}

var layer = new PopupLayer();

layer.addElement({

ele: '.popup',

content: 'content of layer'

});

layer.addElement({

ele: '.popup300',

content: 'content of layer 300',

time: 300

})