簡單浮層製做

浮層效果預覽

實現了：
. 點擊按鈕彈出浮層
. 點擊別處關閉浮層
. 點擊浮層時，浮層不得關閉
. 再次點擊按鈕，浮層消失

要點解析：
頁面結構

<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()