本文主要介紹了jQuery實現可兼容IE6的遮罩功能,詳細分析了jQuery遮罩層的佈局、樣式及功能實現技巧,需要的朋友可以參考下,希望能幫助到大家。
最精簡,最強大的 jQuery 遮罩層效果。
當瀏覽器改變大小時,遮罩層的大小會隨之改變。
遮罩層上方的對話方塊可隨 scroll 的改變而改變,即對話方塊在瀏覽器居中顯示。
HTML 程式碼
正在加载,请稍后...
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檔案。
相關推薦:
#以上是jQuery實作可相容IE6的遮罩功能實例分享的詳細內容。更多資訊請關注PHP中文網其他相關文章!