jquery實現簡單的遮罩層_javascript技巧

一、jQuery實現遮罩層的不同樣式
1.1 背景半透明遮罩層樣式
需要一個黑色（當然也可以其他）背景，且須設置為絕對定位，以下是項目中用到的css樣式：

1.2 jQuery實現遮罩

1.3 提示框
遮罩的目的無非讓人無法操作內容，突出提示框，而提示框可參考上面的制作，z-index比遮罩層更高便可。主要問題是，如何控制提示框在瀏覽器居中。

二、Jquery超簡單遮罩層實現代碼
在開發中，為了避免二次提交，遮罩層的運用越來越普遍
看了很多代碼，下面跟大家分享一下我認為最簡單的遮罩層實現方式：
1.樣式如下設置：
CSS代碼：

其中：opacity:0.5;適用于IE， -moz-opacit:0.5;適用于火狐；你只需要都加上，便可以火狐和IE下都可以使用。
2.指定層的高度、和寬度
js代碼

4.使用方法
在ajax提交表單后，加上showMask方法，數據返回后，加上hideMask()
需要的親們可以根據自己需求，在遮罩層上面加一些提示信息

三、發布個JQuery的遮罩層實現（mask)

用過ExtJs的可能知道在ExtJs中集成了很多的UI元素可以很方便我們的使用。其中有mask()和unmask()這兩個方法,這兩個方法在指定的元素上添加一個遮罩層和一個提示消息實現，增加客戶體驗。由于最近做項目的時候，發現有時為了使用這一兩個方法需要引入一個比較“龐大”的Extjs進來，覺得有點不劃算，于是自己用jquery實現了一個比較簡單mask、unmask方法來實現該效果。大家知道jquery是一個優秀的javascript框架，不但體積小而且使用方便，我現在逐漸將系統中使用Extjs實現的代碼或組建全部更換成Jquery來實現。好了不多說，上我的代碼，這些代碼是根據網上的一位朋友實現的documentMask基礎上進行整改的，使用上更加靈活方便了。

下面是使用實例代碼可供參考

 
 
 
聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com

jquery實現簡單的遮罩層_javascript技巧

jquery實現簡單的遮罩層_javascript技巧:本文實例講解了jquery遮罩層，包括遮罩層的不同樣式實現、mask實現遮罩層等，分享給大家供大家參考，具體內容如下 一、jQuery實現遮罩層的不同樣式 1.1 背景半透明遮罩層樣式 需要一個黑色（當然也可以其他）背景，且須設置為絕對定位，以下是項目中用到的c

推薦度：

點擊下載本文 文檔為doc格式