当前位置: 首页 > Web前端 > HTML

简单的浮层制作

时间:2023-04-02 16:39:01 HTML

浮层效果预览实现:点击按钮弹出浮层。单击别处关闭浮层。单击浮层时,浮层无法关闭。再次点击按钮,浮层消失divclass="wrapper">点我我是浮层

三角形的实现注意这里的三角形其实是用两个div实现的。.tips::before{内容:'';右:100%;顶部:3px;border:10px实心透明;右边框颜色:红色;位置:绝对;}.tips::after{内容:'';右:100%;顶部:4px;border:9px实心透明;右边框颜色:白色;位置:绝对;点一下,让边框自然出来。点击按钮:$('.clickMe').on('click',(e)=>{$('.tips').toggle();setTimeout(()=>{$(document).one('click',()=>{$('.tips').hide()})},0)})$('.wrapper').on('click',(e)=>{e.stopPropagation()})toggle()主要是切换浮层的transition,循环一开始就执行。setTimeout(f,0)这种写法的目的是让f尽早执行,但不能保证f马上执行。补充知识点:toggle()stopPropagation()setTimeout()