<style>
　　　
　　.panel_bak
　　{
　　    position:fixed;
    　　bottom:0;
    　　display:none;
    　　width:100%;
    　　margin:0px;
   　　 padding:5px;
    　　text-align:center;
    　　background:#fff;
    　　padding:15px;
　　}
　　
　　.line_bak{
    　　height:35px;
    　　line-height:35px;
    　　text-align:center;
　　}
    .bak{
        position:fixed;
        top:0;
        left:0;
        background-color: rgba(0,0,0,.5);
        height:20px;
        width:100%
    }
</style>
<body>
　　//遮罩层
　　<div class='bak'></div>
　　//滑出页面+遮罩层
　　<div class="panel_bak" >
　　　　<div class='line_bak'></div>
　　　　<div class='line_bak'></div>
　　　　<div class='line_bak'></div>
    　　<div class='bak'></div>
　　</div>
</body>

//滑出页面+遮罩层
<script>
　
$(".panel_bak").empty();
//弹出页面添加高度
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");
$(".line_bak").click(function(t){
　　$(".panel_bak").slideUp("fast");
　　$(".bak").slideUp("fast");
})
</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. smile domain name www.bn-nd.com for sell. Please contact boyanzheng at foxmail.com 微笑的域名。请联系邮箱。

  2. Python 循环结构语句

    1.for循环:计次循环 2.while循环:条件循环 3.嵌套循环 4.跳转语句 一.for循环的使用 1.进行数值循环 利用数值循环输出三次‘你好’: >>> for i in ...

  3. uva11491 Erasing and Winning

    边读入边处理 优化了速度一开始有想错了的地方.处理输入有点想用stringstream, 的问题在于他把字符串连续的数字作为一个整体,遇到空格才分开,所以不适用 #include<cstdio& ...

  4. ignore-on-commit svn 更改文件后 默认不提交文件到服务器（服务器上已存在的文件）

    不用那个忽略文件那个,那个功能是删除服务器的文件,然后本地还存在,不符合我的要求 我的要求是 服务器文件在,我不动,然后我改完了,和别人的不冲突,我也不覆盖别人的文件 主要就是默认不提交,这个很重要 ...

  5. node节点的部署

    master点赋予用户权限 [root@mast-1 k8s]# kubectl create clusterrolebinding kubelet-bootstrap \ > --cluste ...

  6. python:第一章

    完成同一个任务,C语言要写1000行代码,Java只需要写100行,而Python可能只要20行. 代码少的代价是运行速度慢,C程序运行1秒钟,Java程序可能需要2秒,而Python程序可能就需要1 ...

  7. PyTorch的十七个损失函数

    本文截取自<PyTorch 模型训练实用教程>,获取全文pdf请点击: tensor-yu/PyTorch_Tutorial​github.com 版权声明:本文为博主原创文章,转载请附上 ...

  8. java对比IO和NIO的文件读写性能测试

    1. NIO采用更接近操作系统执行IO的方式:通道和缓存器:顾名思义,数据源的数据由缓存器通过通道进行传输. 2. 在JDK5之后,原始IO系统底层用NIO进行了优化,这可以通过sun公布的源码中找到 ...

  9. 关于JVM内存模型，GC策略以及类加载器的思考

    JVM内存模型 Sun在2006年将Oracle JDK开源最终形成了Open JDK项目,两者在绝大部分的代码上都保持一致.JVM的内存模型是围绕着原子性(操作有且仅有一个结果).可见性(racin ...

  10. 3 SQL 聚合与排序

    3 聚合与排序 3-1 对表进行聚合查询 聚合函数 通过SQL对数据进行 操作或计算时需要使用函数. 计算表中全部数据行数时,可以使用COUNT函数. COUNT : 计算表中的记录数(行数). SU ...