遮罩層 彈框 頁面滾動

第一種情況比較簡單，彈框和頁面都不可滾動

.mask

.box

var obtn = document.getelementbyid("btn"),

omask = document.getelementbyid("mask"),
obox = document.getelementbyid("box"),
oclose = document.getelementbyid("close");
obtn.onclick = () => 
oclose.onclick = () => 
omask.addeventlistener('touchmove', (e) => );

1.移動端相容性不好，可應用於pc端

.mask

.box

var obtn = document.getelementbyid("btn"),

omask = document.getelementbyid("mask"),
obox = document.getelementbyid("box"),
oclose = document.getelementbyid("close");
obtn.onclick = () => 
oclose.onclick = () =>

.maskwrap

.mask
.box

var obtn = document.getelementbyid("btn"),

omaskwrap = document.getelementbyid("maskwrap"),
omask = document.getelementbyid("mask"),
obox = document.getelementbyid("box"),
oclose = document.getelementbyid("close");
obtn.onclick = () => 
oclose.onclick = () => 
omask.addeventlistener('touchstart', (e) => );
let starty = 0; // 記錄開始滑動的座標，用於判斷滑動方向
let status = 0; // 0：未開始，1：已開始，2：滑動中
// 核心部分
obox.addeventlistener('touchstart', e => , false);
obox.addeventlistener('touchmove', e => 
// 已經到低部盡頭了還要向下滑動，阻止它
if ((st === sh - ch) &&  py < starty) 
}, false);
obox.addeventlistener('touchend', e => , false);

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 = () => 
oclose.onclick = () => 
var bodyel = document.body;
var top = 0;
function stopbodyscroll (isfixed)  else 
}// window.onscroll = stopbodyscroll(isfixed);
document.addeventlistener("onscroll", function (e) )

html實現彈框，並伴隨遮罩層，且彈框居中

本文介紹的內容主要實現的功能有，出現彈框，並且伴隨遮罩層，且彈框一直居中。html和js 聯絡客服 function showbox 顯示隱藏層和彈出層 function hidebox 去除隱藏層和彈出層 function contact css hidebg hidebox content bo...

IONIC遮罩層及自定義彈框

先看效果圖 當我們在使用自定義彈框後，需要乙個背景遮罩層。下面是實現方法 html頁面 about onebtn 您的餘額不足，請及時充值！取消確定 css 樣式是關鍵 ion row twob ialog div btn div last child shade ts import from an...

jQuery 遮罩層 浮動框

因為css不熟，實現總是搞不定ie6，所以結合用jquery了。1.遮罩層 指令碼 onevent function maskdiv css width body width maskdiv css height body heigth maskdiv show 要點 獲取body的大小。2.浮動框...