ooltip提示效果經常會使用到，會運用到的場景是一些信息提示標識網頁中。

具體效果：

實現代碼

html:

title的值就是彈出層的內容！

css:

次在講css實現tab切換時，有童靴留言說可以使用錨點實現，對的，就是可以使用錨點，然而，使用錨點涉及到的又有哪些關鍵技術了？今天我們以錨點實現彈窗為例來解答這個問題

一句話總結實現原理就是：a標簽改變hash值觸發css3偽類target作用對應id的dom元素。

一：講清楚:target怎么作用的

：target是CSS里一個非常有趣的偽選擇器。它在CSS里發生作用的過程是這樣的：當瀏覽器地址里的hash（地址#號后面的部分）和：target偽選擇器指定的ID匹配上時，它的樣式就會在這個ID元素上生效。

實例dom結構：

dom結構比較簡單，兩個帶href為#id的a標簽，以及兩上對應#id后面id值作為自己id的p標簽。下面我們給偽元素定義一個樣式：

然后，我們點擊#news1時p#news1元素對這個樣式生效，點擊#news2時p#news2元素對這個樣式生效。（結論是：target選擇器會突出顯示當前活動的HTML錨）效果是這樣的：

好了，以上實現就是為了說明偽元素是這樣作用的，記住上面加粗語句就行了。下面來實現我們本篇要講的主題—錨點實現彈窗

二：實現彈窗功能

知道target是怎么作用的了，那下面這個彈窗功能就好實現了。

實現的dom結構：

由上圖可知，兩個帶href#id的a標簽，和兩個id等于#id的dom結構。運行效果是這樣的：

給target偽類定義樣式：

這個樣式的作用是將dom從不顯示變成顯示。

當我們點擊“點擊我”按鈕時，通過錨點改變hash值在通過偽類target將id="popup1"的dom添加偽類定義的樣式。結果是這樣的：

當點擊浮層上的叉時，關閉這個浮層，原理也是一樣的（改變hash引起偽類失效）。

當我們點擊“也點擊我嘛”按鈕時，同樣通過錨點改變hash值在通過偽類target將id="popup2"的dom添加偽類定義的樣。效果是這樣的：

只是這種情況將設置關閉的div.cancel設置成了全局寬度，層級在浮層下。所以通過點擊浮層外的區域就關閉了浮層，關閉原理是一樣的。

三：寫在后面的總結

CSS3的target這個屬性，雖然所有的主流瀏覽器都支持，除了IE8及以下的版本，但是現在使用這種技術的人還是比較少，其實，如果不是太注重動態效果，使用這種瀏覽器原生技術來修飾你的應用也是不錯的選擇。

短內容，說完整事，哪怕只讀一篇也能學知識。點擊關注小鄭搞碼事，說的都是那堆代碼。謝謝您的鼓勵！

直以來，讓前端工程師頭疼的問題肯定包括垂直居中這個問題吧，什么文字垂直居中，圖片垂直居中之類的，很頭疼對不對，如果現在讓你寫一個在網頁正中間顯示的彈出層，你會用什么方法寫呢？

今天來分享一下小編所知道的幾種方法，希望能對大家有用，如果你有更好的解決方法，也歡迎你來告訴我，讓小編也漲漲姿勢哈。

第一種：固定寬高的彈出層

運行效果

css樣式

html代碼

這里大家看下我用紅色框框框起來的那幾行代碼哈，其它的只是附加的一些效果。

優點：適用于各種瀏覽器，包括令前端工程師頭疼的ie6。

缺點：必須要設置彈出層的寬高。

第二種：自適應內容寬高的彈出層

運行效果

css樣式

html代碼

還是只看我用紅色框框框起來的那幾行代碼。

優點：不用設置彈出層寬高，彈出層的寬高隨內容自適應居中。

缺點：只適用于ie10或以上版本及webkit內核的瀏覽器（像現在主流的雙核瀏覽器在高速模式下都可以的）。。

如果要兼容其它內核瀏覽器（比如火狐），就改成這樣：

以上就是小編常用的兩種彈出層在正中間顯示的方法，那么，你是用什么方法實現的呢？歡迎一起交流哦。

謝謝你的閱讀，如果你有更好的方法或在應用過程中遇到問題可以在評論區提問或者直接私信我，我會定期回復，碼農劉小橋與你一起學習，共同進步。