jQuery實作可相容IE6的遮罩功能實例分享

小云云
發布: 2017-12-27 16:37:45
原創
1469 人瀏覽過

本文主要介紹了jQuery實現可兼容IE6的遮罩功能,詳細分析了jQuery遮罩層的佈局、樣式及功能實現技巧,需要的朋友可以參考下,希望能幫助到大家。

最精簡,最強大的 jQuery 遮罩層效果。

當瀏覽器改變大小時,遮罩層的大小會隨之改變。

遮罩層上方的對話方塊可隨 scroll 的改變而改變,即對話方塊在瀏覽器居中顯示。

HTML 程式碼


点击这里看 jQuery 遮罩层效果.

关闭

正在加载,请稍后...

登入後複製

CSS 程式碼


body { font-family: Arial, Helvetica, sans-serif; font-size: 12px; margin: 0; } #main { height: 1800px; padding-top: 90px; text-align: center; } #fullbg { background-color: Gray; left: 0px; opacity: 0.5; position: absolute; top: 0px; z-index: 3; filter: alpha(opacity=50); /* IE6 */ -moz-opacity: 0.5; /* Mozilla */ -khtml-opacity: 0.5; /* Safari */ } #dialog { background-color: #FFF; border: 1px solid #888; display: none; height: 200px; left: 50%; margin: -100px 0 0 -100px; padding: 12px; position: fixed !important; /* 浮动对话框 */ position: absolute; top: 50%; width: 200px; z-index: 5; } #dialog p { margin: 0 0 12px; } #dialog p.close { text-align: right; }
登入後複製

jquery 程式碼


  
登入後複製

這裡別忘記引入jquery檔案。

相關推薦:

JS實作滑鼠放到圖片上產生遮罩效果的程式碼案例

如何阻止遮罩層後頁面捲動的實例

什麼是js特效遮罩層

#

以上是jQuery實作可相容IE6的遮罩功能實例分享的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門推薦
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!