jq給頁面添加覆蓋層遮罩的實例
更新時間：2017年02月16日 08:10:24 投稿：jingxian
下面小編就為大家?guī)硪黄猨q給頁面添加覆蓋層遮罩的實例。小編覺得挺不錯的，現在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
先引入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+ashx無刷新GridView數據顯示插件(實現分頁、排序、過濾功能)
最近做一個AJAX的GridView來顯示數據，當然按照現在流行的首選是Jquery。2010-04-04
在Web開發(fā)中,表單提交是一個常見的操作,通過表單提交用戶可以向服務器發(fā)送數據,jQuery是一個流行的JavaScript庫,可以簡化處理JavaScript的操作,包括表單提交,在本篇博客中,我們將介紹如何使用jQuery來實現表單提交操作,需要的朋友可以參考下2024-09-09
這篇文章主要介紹了jquery中的ajax方法怎樣通過JSONP進行遠程調用,需要的朋友可以參考下2014-05-05
jQuery頭像裁剪工具jcrop用法實例(附演示與demo源碼下載)
這篇文章主要介紹了jQuery頭像裁剪工具jcrop用法,結合實例形式分析了jQuery頭像裁剪工具jquery.jcrop.js具體使用技巧,并附帶了完整的demo源碼供讀者下載參考,需要的朋友可以參考下2016-01-01
在一些電商網站我們都見到使用過放大鏡來查看商品詳情，那么基于jquery代碼是如何實現放大鏡效果的呢？下面由腳本之家小編給大家分享jquery代碼實現放大鏡效果2016-03-03
今天給大家推薦一款不一樣的jQuery類似瀑布流插件，使文字也能實現瀑布流效果，有需要的小伙伴可要好好看仔細了。2014-11-11
這篇文章主要內容是jQuery無刷新切換主題皮膚實例講解，本文應用cookie記錄用戶所選擇設置的主題皮膚樣式，需要了解的朋友可以參考下2015-10-10
使用$.get可以獲取一個文件的內容，實現很簡單，示例如下，喜歡的朋友可以參考下2013-09-09
jQuery ajax仿Google自動提示SearchSuggess功能示例
這篇文章主要介紹了jQuery ajax仿Google自動提示SearchSuggess功能,結合實例形式較為詳細的分析了jQuery結合ajax與.net后臺調用sql數據庫實現搜索自動提示相關操作技巧,需要的朋友可以參考下2019-03-03
jQuery操作checkbox選擇(list/table)
本文將介紹下checkbox list選擇及checkbox table選中附效果圖，感興趣的朋友可以參考下哈，希望可以幫助到你2013-04-04