jq給頁面添加覆蓋層遮罩的實例
更新時間：2017年02月16日 08:10:24 投稿：jingxian
下面小編就為大家?guī)硪黄猨q給頁面添加覆蓋層遮罩的實例。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
先引入jq代碼，然后代碼如下：
$(function(){
var docHeight = $(document).height(); //獲取窗口高度
$('body').append('<div id="overlay"></div>');
$('#overlay')
.height(docHeight)
.css({
'opacity': .9, //透明度
'position': 'absolute',
'top': 0,
'left': 0,
'background-color': 'black',
'width': '100%',
'z-index': 5000 //保證這個懸浮層位于其它內容之上
});
setTimeout(function(){$('#overlay').fadeOut('slow')}, 3000); //設置3秒后覆蓋層自動淡出
});
以上這篇jq給頁面添加覆蓋層遮罩的實例就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關文章
這篇文章主要為大家詳細介紹了jQuery實現(xiàn)簡單三級聯(lián)動效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-09-09
這篇文章主要介紹了jQuery短信驗證倒計時功能實現(xiàn)方法,實例分析了jQuery前臺倒計時功能及ajax交互的相關技巧,需要的朋友可以參考下2016-05-05
jQuery標簽替換函數replaceWith()的使用例子
這篇文章主要介紹了jQuery標簽替換函數replaceWith()的使用例子,使用replaceWith可以替換模板里的標簽,還可以實現(xiàn)多語言網站,需要的朋友可以參考下2014-08-08
網絡上很很多這種效果的JS寫法，但是還沒有看見用jQuery寫的，效果實現(xiàn)很簡單，確切的說是用jquery實現(xiàn)這個效果很簡單，這就是jquery的強大和魅力所在。2011-04-04
本文主要介紹了解決jquery.zclip輕量級復制失效問題的工作原理及方法。具有一定的參考價值，下面跟著小編一起來看下吧2017-01-01
jQuery實現(xiàn)手機號正則驗證輸入及自動填充空格功能
這篇文章主要介紹了jQuery實現(xiàn)手機號正則驗證輸入及自動填充空格功能,涉及jQuery事件響應、字符串遍歷及正則判斷等相關操作技巧,需要的朋友可以參考下2018-01-01
效果說明：配合已有css樣式，載入插件后，網頁元素可以隨意在窗口內拖拽，設置了原位置半透明和拖拽半透明的效果選項，可根據需要選擇。另外，當頁面上有多個可拖拽元素時，可以載入另外一個用于設置z-index的插件，模擬windows窗口點擊置頂效果。2013-08-08
這篇文章主要介紹了jQuery實現(xiàn)帶動畫效果的二級下拉導航方法,涉及jQuery操作css樣式及鼠標事件的技巧,非常具有實用價值,需要的朋友可以參考下2015-03-03
本文為大家介紹下jquery1.9 下如何檢測瀏覽器類型和版本，下面有個不錯的示例，大家可以參考下2013-12-12
jQuery實現(xiàn)按鈕點擊遮罩加載及處理完后恢復的效果
這篇文章主要介紹了jQuery實現(xiàn)按鈕點擊遮罩加載及處理完后恢復的效果,涉及jQuery與asp.net后臺交互實現(xiàn)頁面效果動態(tài)變換的相關技巧,需要的朋友可以參考下2016-06-06