zoukankan      html  css  js  c++  java
  • jQuery遮罩层的实现

    遮罩层其实就是一个占据整个页面的半透明效果的页面元素,一般用div实现。页面中实现遮罩层,无非就是为了让用户只能操作弹出窗口的内容,而不允许操作弹出窗口外的内容。

    在实现时,我使用了两个div,一个遮罩层id=overlay,一个是弹出窗id=dialog。

    1 <body>
    2      <div id="overlay"></div>
    3      <div id="dialog">点击弹出窗可以隐藏遮罩层</div>
    4      <a id="show" href="#">点击弹窗</a>
    5  </body>

    有了页面结构后,接下来应该实现的是设置这些页面元素的样式,使遮罩层为透明的效果,并且开始时遮罩层和弹出窗口层都隐藏,实现的css如下:

    #overlay{display:none;position:absolute;left:0;top:0;width:100%;height:100%;background:#000;opacity:0.5;filter:alpha(opacity=30);z-index:9;-moz-opacity:0.5; 
    -khtml-opacity:0.5; }
    #dialog{display:none;position:absolute;left:50%;top:50%;width:400px;height:400px;margin:-200px 0 0 -200px;border:5px solid  rgba(0,0,0,0.6);border-radius:5px;background:#fff;z-index:15;}

    要注意的是设置#dialog的z-index值要比#overlay的高,而#overlay的z-index要比一般的元素的高,这样才能达到遮罩住其它页面元素的效果,不允许用户再操作除了弹出窗的其它内容。

    然后用jQuery来实现弹出和隐藏的动作吧,代码如下:

     1 $(document).ready(function(){
     2     $("#show").click(function(){
     3     showDg();
     4     });
     5     $("#dialog").click(function(){
     6     hideDg();
     7     });
     8 });
     9 //显示遮罩层和弹出窗
    10 function showDg(){
    11     $("#overlay").show();
    12     $("#dialog").show(100);
    13 };
    14 //隐藏遮罩层和弹出窗
    15 function hideDg(){
    16     $("#overlay").hide();
    17     $("#dialog").hide();
    18 };
    19 </script>
  • 相关阅读:
    Unbutu之web环境部署——常用软件安装
    利用百度uaredirect.js判断手机终端并自动跳转
    原生Ajax附件上传简单实例
    shader glsl 函数图举例
    pixijs释放纹理的方法
    pixijs shader透明度设置方法
    pixijs 用canvas的方法
    threejs 解决模型缩小有黑边的解决方案
    threejs 透明模型遮挡后面模型解决方案
    javascript canvas 清除图片空白多余的方法
  • 原文地址:https://www.cnblogs.com/beyondfengyu/p/3817835.html
Copyright © 2011-2022 走看看