html引导蒙层,CSS实现镂空蒙层
添加⼀个元素⽤border去做蒙层，镂空部分⽤width, height 或者 padding去控制。⽗级设置⼀个宽⾼100%的div，overflow: hidden 隐藏超出部分的border，以及定位显⽰镂空部分。
div
width: 100%
height: 100%
overflow: hidden
position: absolute
left: 0
top: 0
z-index: 1000
span
display: block
border: 100px solid rgba(0, 0, 0, .7)
padding: 10px
box-sizing: content-box //注意需⽤标准盒模型，宽⾼才会⽣效
以上便是⼀个简单的镂空蒙层。若需要定位到某个元素上⾯，多层页⾯引导功能，配合js实现，样式也重新定义下
css思路，⽤flex布局让span标签整体，span标签border设置超级⼤！！
div
width: 100%
height: 100%
overflow: hidden
position: absolute
left: 0
top: 0
z-index: 1000
display: flex
justify-content: center
align-items: center
span
display: block
border: 20rem solid rgba(0, 0, 0, .7)
padding: 10pxhtml的flex布局
box-sizing: content-box //注意需⽤标准盒模型，宽⾼才会⽣效
js代码(react版本)具体使⽤⾃由配置
function getElementTop (elem) {
var elemTop=elem.offsetTop;//获得elem元素距相对定位的⽗元素的top
elem=elem.offsetParent;//将elem换成起相对定位的⽗元素
while(elem!=null){//只要还有相对定位的⽗元素
elemTop+=elem.offsetTop;
elem=elem.offsetParent;
}
return elemTop;
}
let cover = (obj, callBack) => {
let {args, el, close} = obj
if (args && el) {
if (args instanceof HTMLElement) {
let temp = args
args = el
el = temp
}
}
// 创建span⽤于转换rem为px
let coverNode = ElementById('cover_mask') || ateElement('div'), span = ateElement('span'),
position = {
borderRadius: '50%',
square: true,
place: 'top',
}
coverNode.id = 'cover_mask'
span.style.position = 'absolute'
span.style.visibility = 'hidden'
span.style.opacity = 0
span.style.width = '1rem'
span.style.height = '1rem'
el = el || args
if (el && el instanceof HTMLElement) {
span.style.left = el.offsetLeft + 'px'
p = getElementTop(el) + 'px'
span.style.width = el.offsetWidth + 'px'
span.style.height = el.offsetHeight + 'px'
}
if (args && !(args instanceof HTMLElement)) {
for (let i in args) {
span.style[i] = args[i]
position[i] = args[i]
}
}
document.body.appendChild(span)
let topSite = -document.documentElement.clientHeight / 2 + span.offsetHeight / 2 + span.offsetTop, leftSite = -document.documentElement.clientWidth / 2 + span.offsetWidth / 2 + span.offsetLeft veChild(span)
let h = position.place === 'center' ? 0 : 10 / 320 * document.documentElement.clientWidth
let square = span.style.height > span.style.width ? span.style.height : span.style.width
position.padding = parseInt(square) / 2 + 10 / 320 * document.documentElement.clientWidth + 'px' position.width = '0' // position.square ? square : span.style.width
position.height = '0' // position.square ? square : span.style.height
{
if (callBack) callBack()
if (close) veChild(coverNode)
}}>
,
coverNode
)
if (!ElementById('cover_mask')) document.body.appendChild(coverNode)
}
//cover({
// args,el参数选填其⼀，也可都传
args: {width: '1rem', height: '1rem', padding: '5px', left: '10px', top: '10px'} //传样式定位置el: dom, //传dom节点
close： true/false //此次点击是否关闭蒙层 ⾮必传
}, () => {
//点击的回调函数 ⾮必传
})

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。