jQuery實(shí)現(xiàn)可兼容IE6的遮罩功能詳解
本文實(shí)例講述了jQuery實(shí)現(xiàn)可兼容IE6的遮罩功能。分享給大家供大家參考,具體如下:
最精簡,最強(qiáng)大的 jQuery 遮罩層效果。
當(dāng)瀏覽器改變大小時(shí),遮罩層的大小會相應(yīng)地改變。
遮罩層上方的對話框可隨 scroll 的改變而改變,即對話框在瀏覽器居中顯示。
HTML 代碼
<div id="main"><a onclick="showBg();" href="#" rel="external nofollow" rel="external nofollow" >點(diǎn)擊這里看 jQuery 遮罩層效果.</a></div> <div id="fullbg"></div> <div id="dialog"> <p class="close"><a onclick="closeBg();" href="#" rel="external nofollow" rel="external nofollow" >關(guān)閉</a></p> 正在加載,請稍后... </div>
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; /* 浮動(dòng)對話框 */ position: absolute; top: 50%; width: 200px; z-index: 5; } #dialog p { margin: 0 0 12px; } #dialog p.close { text-align: right; }
jquery 代碼
<script type="text/javascript" src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script> <script type="text/javascript"> //顯示灰色 jQuery 遮罩層 function showBg() { var bh = $("body").height(); var bw = $("body").width(); $("#fullbg").css({ height:bh, width:bw, display:"block" }); $("#dialog").show(); } //關(guān)閉灰色 jQuery 遮罩 function closeBg() { $("#fullbg,#dialog").hide(); } </script> <!--[if lte IE 6]> <script type="text/javascript"> // 浮動(dòng)對話框 $(document).ready(function() { var domThis = $('#dialog')[0]; var wh = $(window).height() / 2; $("body").css({ "background-image": "url(about:blank)", "background-attachment": "fixed" }); domThis.style.setExpression('top', 'eval((document.documentElement).scrollTop + ' + wh + ') + "px"'); }); </script> <![endif]-->
這里別忘記引入jquery文件
更多關(guān)于jQuery相關(guān)內(nèi)容感興趣的讀者可查看本站專題:《jQuery窗口操作技巧總結(jié)》、《jQuery拖拽特效與技巧總結(jié)》、《jQuery常用插件及用法總結(jié)》、《jquery中Ajax用法總結(jié)》、《jQuery表格(table)操作技巧匯總》、《jQuery擴(kuò)展技巧總結(jié)》、《jQuery常見經(jīng)典特效匯總》、《jQuery動(dòng)畫與特效用法總結(jié)》及《jquery選擇器用法總結(jié)》
希望本文所述對大家jQuery程序設(shè)計(jì)有所幫助。
- jQuery實(shí)現(xiàn)簡單網(wǎng)頁遮罩層/彈出層效果兼容IE6、IE7
- 兼容主流瀏覽器的jQuery+CSS 實(shí)現(xiàn)遮罩層的簡單代碼
- JS遮罩層效果 兼容ie firefox jQuery遮罩層
- jQuery+css+html實(shí)現(xiàn)頁面遮罩彈出框
- JQuery 遮罩層實(shí)現(xiàn)(mask)實(shí)現(xiàn)代碼
- jQuery+html5實(shí)現(xiàn)div彈出層并遮罩背景
- jquery彈出關(guān)閉遮罩層實(shí)例
- jQuery操作dom實(shí)現(xiàn)彈出頁面遮罩層(web端和移動(dòng)端阻止遮罩層的滑動(dòng))
- jquery 圓角遮罩圖片實(shí)現(xiàn)圖片圓角
- jQuery+AJAX實(shí)現(xiàn)遮罩層登錄驗(yàn)證界面(附源碼)
- jquery下實(shí)現(xiàn)overlay遮罩層代碼
相關(guān)文章
jQuery的ztree仿windows文件新建和拖拽功能的實(shí)現(xiàn)代碼
zTree 是一個(gè)依靠 jQuery 實(shí)現(xiàn)的多功能 “樹插件”。優(yōu)異的性能、靈活的配置、多種功能的組合是 zTree 最大優(yōu)點(diǎn)。這篇文章主要介紹了jQuery的ztree仿windows文件新建和拖拽功能的實(shí)現(xiàn)代碼,需要的朋友可以參考下2018-12-12