CSS 點擊電話出現彈窗

有時候在頁面中，我們會想要在電話號碼上添加一個點擊功能，讓用戶可以直接點擊電話號碼進行打電話。而且，我們還希望能夠讓點擊后出現彈窗，讓用戶確認是否要繼續打電話。

在 CSS 中實現這個功能是非常簡單的。我們可以通過給電話號碼添加一個鏈接來實現點擊電話號碼之后打開撥號盤，同時使用偽元素 ::before 創建彈窗。

a[href^="tel:"]:before {
content: "撥打 " attr(href);
font-size: 0.8rem;
display: inline-block;
padding: 0.2rem 0.5rem;
margin: 0.3rem;
border: 1px solid black;
border-radius: 5px;
position: absolute;
top: -2rem;
left: 2rem;
background-color: white;
}
a[href^="tel:"]:after {
content: "";
display: block;
width: 0;
height: 0;
border-style: solid;
border-width: 1rem 1rem 0 1rem;
border-color: white transparent transparent transparent;
position: absolute;
top: -1rem;
left: 2rem;
}
a[href^="tel:"]:hover:before {
background-color: black;
color: white;
}

在這個代碼中，我們首先選中所有的 href 屬性以“tel:”開頭的鏈接，然后使用 ::before 創建一個偽元素，對這個元素進行樣式設置，來實現彈窗。我們還使用 ::after 實現一個小箭頭。

最后，我們添加一個 :hover 偽類，當用戶懸停在鏈接上時，彈窗的顏色和字體顏色就會有所改變。

通過這個功能，我們可以為用戶提供更直接、更便捷的聯系方式，同時還能夠增加用戶交互的趣味性。如果你想要更好的用戶體驗，那么就試試這個 CSS 點擊電話出現彈窗的技巧吧。