浮層結果預覽

完成了：
. 點擊按鈕彈出浮層
. 點擊別處封閉浮層
. 點擊浮層時，浮層不得封閉
. 再次點擊按鈕，浮層消逝

要點剖析：
頁面構造

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