您當(dāng)前位置：首頁 > web前端 > jquery > IE和火狐測試通過的jquery的屏遮層插件

IE和火狐測試通過的jquery的屏遮層插件

來源：程序員人生發(fā)布時(shí)間：2013-10-20 14:45:38 閱讀次數(shù)：3360次

　　建站學(xué)院(LieHuo.Net)WEB教程 今天看到一同事做彈出框，做背景遮蔽層，搗鼓來搗鼓去的就是問題大堆，看不過去了，順手做了個(gè)jquery的插件，其實(shí)很頭痛的，我不怎么喜歡用jquery，所以沒看過它的api，倒是看過它的源碼，于是我臨時(shí)下載了份jquery的api文檔，臨陣磨槍。放這里共享了。

　　希望對大家有用小插件來的，見笑了啊各位，

　　代碼呈上，測試通過的瀏覽器有ie6,ie7,ie8, ff,oprea,safari等。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><HTML><HEAD><TITLE> New Document - liehuo.net</TITLE><META NAME="Generator" CONTENT="EditPlus"><META NAME="Author" CONTENT=""><META NAME="Keywords" CONTENT=""><META NAME="Description" CONTENT=""><SCRIPT src="./jquery.js" type="text/javascript"></SCRIPT><style>body {margin:0;padding:0;}</style></HEAD><BODY><select id="s"><option>測試ie6下select的bug</option></select><br>基于jquery的屏蔽層插件 create 李濤<br>兼容瀏覽器屏蔽層，支持ie6,7,8 ff chrome safari oprea等主流瀏覽器。<br>使用方法<br>var o=new $.OverLay({Opacity:10,Color:"red",zIndex:500});<br>o.Show()顯示<br>o.Close()為關(guān)閉該屏蔽層<br>參數(shù)說明 {Opacity:10,Color:"red",zIndex:500} 該參數(shù)為屏蔽層配置 Opacity為透明度 color為屏蔽層的顏色zindex為屏蔽層的zindex值<br><span style="color:blue">參數(shù)可以為空既var o=new $.OverLay();因?yàn)樵摬寮嘀灿心J(rèn)項(xiàng)</span><br><br><br><br><br><script> var isIE6 = $.browser.msie && ([/MSIE (d).0/i.exec(navigator.userAgent)][0][1] == 6);//因?yàn)閖query不能很好的判斷ie6 (function($){ $.OverLay = (function(){return function(){this.initialize.apply(this, arguments);}})(); $.OverLay.prototype = { initialize: function(options){ this.SetOptions(options); this.Lay = $(document.createElement("div")); $('body').append(this.Lay) this.Color = this.options.Color; this.Opacity = parseInt(this.options.Opacity); this.zIndex = parseInt(this.options.zIndex); this.Lay.css({display:"none", zIndex:this.zIndex,left:0,top:0,position:"fixed",width:"100%",height:"100%"}) if(isIE6){ this.Lay.css({position : "absolute"}); this._resize =(function(object, fun) { return function() { return fun.apply(object, arguments); } })(this,function(){ this.Lay.css({width:Math.max(document.documentElement.scrollWidth, document.documentElement.clientWidth) + "px",height:Math.max(document.documentElement.scrollHeight, document.documentElement.clientHeight) + "px"}); }) this.Lay.html('<iframe style="position:absolute;top:0;left:0;width:100%;height:100%;filter:alpha(opacity=0);"></iframe>'); } }, SetOptions: function(options) { this.options = {Color:"#666",Opacity:50,zIndex:1000}; jQuery.extend(this.options,options || {}); }, Show: function() { if(isIE6){ this._resize(); $(window).resize(this._resize)} this.Lay.css({backgroundColor:this.Color,display:"block",position:"absolute"}) if($.browser.msie) {this.Lay.css({filter : "alpha(opacity:" + this.Opacity + ")"})} else {this.Lay.css({opacity : this.Opacity / 100})} }, Close: function() { this.Lay.css({display : "none"}); if(isIE6){ $(window).resize(function(){})} } };})(jQuery) ///下面為調(diào)用實(shí)例 liehuo.net var o var open11=function(){ o=new $.OverLay({Opacity:10,Color:"red"}); o.Show(); setTimeout("o.Close()",3000); //三秒后關(guān)閉該屏蔽層 } </script><input type="button" onclick="open11()" value="點(diǎn)擊測試，屏蔽層將在三秒后關(guān)閉"></BODY></HTML>
建站學(xué)院(liehuo.net)提示：可修改部分代碼后運(yùn)行！

　　原文來自：http://www.cnblogs.com/litao229/archive/2009/07/02/1515626.html

生活不易，碼農(nóng)辛苦
如果您覺得本網(wǎng)站對您的學(xué)習(xí)有所幫助,可以手機(jī)掃描二維碼進(jìn)行捐贈(zèng)
程序員人生

------分隔線----------------------------

上一篇 SQL Server 如何刪除數(shù)據(jù)庫所有用戶表？

下一篇 Access入門教程 1.2 什么是數(shù)據(jù)庫管理系統(tǒng)

分享到:

------分隔線----------------------------

為碼而活

積分：4237

15粉絲

7關(guān)注

欄目熱點(diǎn)

多多色-多人伦交性欧美在线观看-多人伦精品一区二区三区视频-多色视频-免费黄色视屏网站-免费黄色在线

IE和火狐測試通過的jquery的屏遮層插件