jQuery 遮罩层效果

最新推荐文章于 2020-07-15 08:04:57 发布

转载最新推荐文章于 2020-07-15 08:04:57 发布 · 977 阅读

文章标签：

#jquery #function #mozilla #safari #scroll #浏览器

本文展示了如何使用jQuery实现浏览器窗口大小变化时遮罩层与对话框的动态调整，确保对话框始终居中显示，提供了一个简洁且强大的交互效果。

最精简，最强大的 jQuery 遮罩层效果。
1. 当浏览器改变大小时，遮罩层的大小会相应地改变。
2. 遮罩层上方的对话框可随 scroll 的改变而改变，即对话框居中显示。

HTML Code：

 
    1<div id="main"> <a href="#" onclick="showBg();">点击这里看 jQuery 遮罩层效果.</a> </div> 
 
    2<!-- jQuery 遮罩层 -->
 
    3<div id="fullbg"></div> 
 
    4<!-- end jQuery 遮罩层 -->
 
    5<!-- 对话框 -->
 
    6<div id="dialog"> 
 
    7  <p class="close"><a href="#" onclick="closeBg();">关闭</a></p> 
 
    8  <p>正在加载，请稍后...</p> 
 
    9</div> 
 
    10<!-- jQuery 遮罩层上方的对话框 -->

CSS Code：

 
    1<style type="text/css"> 
 
    2body { 
 
    3    font-family:Arial, Helvetica,  sans-serif; 
 
    4    font-size:12px; 
 
    5    margin:0; 
 
    6} 
 
    7#main { 
 
    8    height:1800px; 
 
    9    padding-top:90px; 
 
    10    text-align:center; 
 
    11} 
 
    12#fullbg { 
 
    13    background-color:Gray; 
 
    14    left:0px; 
 
    15    opacity:0.5; 
 
    16    position:absolute; 
 
    17    top:0px; 
 
    18    z-index:3; 
 
    19    filter:alpha(opacity=50); /* IE6 */
 
    20    -moz-opacity:0.5; /* Mozilla */
 
    21    -khtml-opacity:0.5; /* Safari */
 
    22} 
 
    23#dialog { 
 
    24    background-color:#FFF; 
 
    25    border:1px solid #888; 
 
    26    display:none; 
 
    27    height:200px; 
 
    28    left:50%; 
 
    29    margin:-100px 0 0  -100px; 
 
    30    padding:12px; 
 
    31    position:fixed !important; /* 浮动对话框 */
 
    32    position:absolute; 
 
    33    top:50%; 
 
    34    width:200px; 
 
    35    z-index:5; 
 
    36} 
 
    37#dialog p { 
 
    38    margin:0 0 12px; 
 
    39} 
 
    40#dialog p.close { 
 
    41    text-align:right; 
 
    42} 
 
    43</style>

jQuery Code：

 
    1<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script> 
 
    2<script type="text/javascript"> 
 
    3//显示灰色 jQuery 遮罩层 
 
    4function  showBg() { 
 
    5    var bh = $("body").height(); 
 
    6    var bw = $("body").width(); 
 
    7    $("#fullbg").css({ 
 
    8        height:bh, 
 
    9        width:bw, 
 
    10        display:"block"
 
    11    }); 
 
    12    $("#dialog").show(); 
 
    13} 
 
    14//关闭灰色 jQuery 遮罩 
 
    15function  closeBg() { 
 
    16    $("#fullbg,#dialog").hide(); 
 
    17} 
 
    18</script> 
 
    19<!--[if lte IE 6]> 
 
    20<script type="text/javascript"> 
 
    21// 浮动对话框 
 
    22$(document).ready(function() { 
 
    23    var domThis = $('#dialog')[0]; 
 
    24    var wh = $(window).height() / 2; 
 
    25    $("body").css({ 
 
    26        "background-image": "url(about:blank)", 
 
    27        "background-attachment": "fixed"
 
    28    }); 
 
    29    domThis.style.setExpression('top', 'eval((document.documentElement).scrollTop + ' + wh + ') + "px"'); 
 
    30}); 
 
    31</script> 
 
    32<![endif]-->