Warning: error_log(/data/www/wwwroot/hmttv.cn/caches/error_log.php): failed to open stream: Permission denied in /data/www/wwwroot/hmttv.cn/phpcms/libs/functions/global.func.php on line 537 Warning: error_log(/data/www/wwwroot/hmttv.cn/caches/error_log.php): failed to open stream: Permission denied in /data/www/wwwroot/hmttv.cn/phpcms/libs/functions/global.func.php on line 537
ooltip提示效果經常會使用到,會運用到的場景是一些信息提示標識網頁中。
具體效果:
實現代碼
html:
title的值就是彈出層的內容!
css:
直以來,讓前端工程師頭疼的問題肯定包括垂直居中這個問題吧,什么文字垂直居中,圖片垂直居中之類的,很頭疼對不對,如果現在讓你寫一個在網頁正中間顯示的彈出層,你會用什么方法寫呢?
今天來分享一下小編所知道的幾種方法,希望能對大家有用,如果你有更好的解決方法,也歡迎你來告訴我,讓小編也漲漲姿勢哈。
第一種:固定寬高的彈出層
運行效果
css樣式
html代碼
這里大家看下我用紅色框框框起來的那幾行代碼哈,其它的只是附加的一些效果。
優點:適用于各種瀏覽器,包括令前端工程師頭疼的ie6。
缺點:必須要設置彈出層的寬高。
第二種:自適應內容寬高的彈出層
運行效果
css樣式
html代碼
還是只看我用紅色框框框起來的那幾行代碼。
優點:不用設置彈出層寬高,彈出層的寬高隨內容自適應居中。
缺點:只適用于ie10或以上版本及webkit內核的瀏覽器(像現在主流的雙核瀏覽器在高速模式下都可以的)。。
如果要兼容其它內核瀏覽器(比如火狐),就改成這樣:
以上就是小編常用的兩種彈出層在正中間顯示的方法,那么,你是用什么方法實現的呢?歡迎一起交流哦。
謝謝你的閱讀,如果你有更好的方法或在應用過程中遇到問題可以在評論區提問或者直接私信我,我會定期回復,碼農劉小橋與你一起學習,共同進步。
圖1
圖2
圖3
*請認真填寫需求信息,我們會在24小時內與您取得聯系。