简单浮层制作

浮层效果预览

实现了：
. 点击按钮弹出浮层
. 点击别处关闭浮层
. 点击浮层时，浮层不得关闭
. 再次点击按钮，浮层消失

要点解析：
页面结构

<div class="wrapper">
        <button class="clickMe">点我</button>
        <div class="tips">
            <span>我是浮层</span>
        </div>
    </div>

三角形的实现
注意这里的三角形，其实是用两个 div 来实现。

.tips::before{
            content:'';
            right:100%;
            top:3px;
            border:10px solid transparent;
            border-right-color:red;
            position:absolute;
        }
.tips::after{
            content:'';
            right:100%;
            top:4px;
            border:9px solid transparent;
            border-right-color:white;
            position:absolute;
        }

小知识：
transparent adj. 透明的
在 ::after 中 border 的像素小一些，背景色变一下，这样边框自然出来了

点击按钮：

$('.clickMe').on('click',(e)=>{$('.tips').toggle();
            setTimeout(()=>{
                $(document).one('click',()=>{$('.tips').hide()})
            },0)
         })
$('.wrapper').on('click',(e)=>{e.stopPropagation()})

toggle() 主要是切换浮层的转态
e.stopPropagation() 阻止事件冒泡

setTimeout() 定时器，
setTimetout(f,0) 的含义会在下一轮事件循环一开始就执行。
setTimeout(f, 0) 这种写法的目的是，尽可能早地执行 f，但是并不能保证立刻就执行 f。

补充知识点：
toggle()
stopPropagation()
setTimeout()