1. <style>
    　　　
  1. 　　.panel_bak
    　　{
    　　    position:fixed;
        　　bottom:0;
        　　display:none;
        　　width:100%;
        　　margin:0px;
       　　 padding:5px;
        　　text-align:center;
        　　background:#fff;
        　　padding:15px;
    　　}
  1. 　　
  1. 　　.line_bak{
        　　height:35px;
        　　line-height:35px;
        　　text-align:center;
    　　}
  1.     .bak{
            position:fixed;
            top:0;
            left:0;
            background-color: rgba(0,0,0,.5);
            height:20px;
            width:100%
        }
    </style>
    <body>
  1. 　　//遮罩层
    　　<div class='bak'></div>
  1. 　　//滑出页面+遮罩层
    　　<div class="panel_bak" >
    　　　　<div class='line_bak'></div>
  1. 　　　　<div class='line_bak'></div>
  1. 　　　　<div class='line_bak'></div>
  1.     　　<div class='bak'></div>
    　　</div>
  1. </body>
  2.  
  3. //滑出页面+遮罩层
    <script>
    　
  1. $(".panel_bak").empty();
  1. //弹出页面添加高度
    var height = $(".line_bak").length * 35 + 20;
    $(".panel_bak").after("<div class='bak'></div>");
    //添加 min-height
    if( height <= 250){
        //遮罩层添加最大高度
        var bak_height = $(window).height() - 250;
        height = 250;
    }else{
        //遮罩层添加对应高度
        var bak_height = $(window).height() - height;
    }
    $(".bak").css("height",bak_height);
    $(".panel_bak").css("height",height).slideToggle("fast");
  1. $(".line_bak").click(function(t){
  1. 　　$(".panel_bak").slideUp("fast");
    　　$(".bak").slideUp("fast");
  1. })
  1. </script>

CSS 遮罩层、滑出页面的更多相关文章

  1. CSS遮罩层的实现

    偶然发现自己原来写了一个CSS遮罩层,虽然这个东西没什么技术含量,但如果本人离开公司后又遇见此类问题,那么可能又得花些时间来找资料了.所以决定还是把它记下来吧. 直接上代码吧. 第一步,html代码: ...

  2. div+css遮罩层

    曾被问到这个问题,不知所措,后来在网上找到了.大神文章:http://www.cnblogs.com/aspx-net/archive/2011/03/11/1981071.html 我想实现的效果没 ...

  3. CSS遮罩层简易写法

      现在很多站点弹出框,都需要一个遮罩层.写法很多,以下是我比较喜欢的一种: .box{ position:absolute; top:0; bottom:0; left:0; right:0; ba ...

  4. js遮罩层弹出显示效果组件化

    1.在web开发中经常遇到遮罩层的效果,可以将这种常用方法通用化 function showid(idname){ var isIE = (document.all) ? true : false; ...

  5. div+css 遮罩层

    CSS样式部分: ---------------------------------- <style type="text/css">#loading-mask{    ...

  6. css遮罩层

    父元素:position:fixed; 让子元素居中对齐:position:absolute;top:0;bottom:0;left:0;right:0;margin:auto; <style& ...

  7. CSS遮罩层，全兼容

    <script type="text/javascript"> $(function(){ $('#divLocker').css({ "position&q ...

  8. Z遮罩层完全覆盖页面

    不要使用absolute定位,用fixed就行.然后 background:rgba(0, 0, 0, 0.5); position:fixed; z-index: 100; left:0; righ ...

  9. css解决滚动弹出层里边的滚动条时带动了整个页面滚动的问题

    之前一个朋友问我说他的一个弹出层在弹出后,上下滑动弹出层或遮罩层,结果遮罩层下边的整个页面(页面超出了一屏)也跟着滚动了,他说他不想要这样的效果,我说你把弹出层和遮罩层的position:fixed设 ...

随机推荐

  1. Window服务程序（windows service application）如何调试

    服务程序不能通过常规的按F5或F11的方式来进行调试和运行,也无法立即运行一个服务或逐步调试它的代码. 因此,你必须安装并启动你的服务,然后附属(attach)一个Debugger到这个服务的进程上.

  2. C程序(1)

  3. PHP13 会话控制

    学习要点 会话控制使用的意义 用户跟踪方式 Cookie的设置.读取以及删除 Session的设置.读取以及删除 自定义session处理方式 会话控制 什么是会话控制 实现服务器跟踪同一个客户端的连 ...

  4. kotlin - Parcelable implementations generator

    本文摘自——https://kotlinlang.org/docs/tutorials/android-plugin.html Android Extensions plugin provides P ...

  5. Sql Server 中锁的概念(2)

    1.一般大家都对事务的四种隔离模式比较熟悉,从松到严依次是: - 读取未提交(Read uncommitted):处于此模式下可能会出现脏读.幻象读.不可重复读 - 读取已提交(Read commit ...

  6. C语言中函数参数传递的本质是值传递

    数组名做函数参数进行传递时,实际上是是一份该指针的拷贝. 给形参赋予其他值,并不影响实参的值. 类似于: int *p = a;    //a为数组名 p = b;          //b为数组名 ...

  7. pymysql遇到中文编码

    明明数据库里的编码方式和字符集都没有问题,用python插入数据时,数据库里的数据还是乱码的 在数据库中插入时,能够正常显示 那就是python导出的数据存在编码问题,代码如下: # coding: ...

  8. AHOI2014/JSOI2014 奇怪的计算器

    题目描述 题解: 考虑到经过一系列变化后小数不可能比大数大,我们可以用线段树维护区间修改. 重点是,每个节点都可以通过$a[i]=a[i]*t1+a0[i]*t2+t3$这个函数来表示,我们就可以把三 ...

  9. OpenJudge-百练-2755

    这道题用递归写的话还是很好写的,我们设递归函数的名称为Ways(w,k) . 它的含义就是,w的大小,取k个物品,有多少种方式. 我们可以知道递归的边界条件就是当w的大小为0的时候,我们的方法数只有一 ...

  10. 详解Spring面向切面编程（AOP)三种实现

    一.什么是AOP AOP(Aspect Oriented Programming),即面向切面编程,可以说是OOP(Object Oriented Programming,面向对象编程)的补充和完善. ...