<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. Zabbix使用外部命令fping处理ICMP ping的请求

    Zabbix使用外部命令fping处理ICMP ping的请求,fping不包含在zabbix的发行版本中,需要额外去下载安装fping程序, 安装完毕之后需要在zabinx_server.conf中 ...

  2. pycharm激活码 pycharm安装后激活方式 pycharm汉化包安装

    汉化包 下载地址: 链接:http://pan.baidu.com/s/1pL6xWl9 密码:x1fh 将下载好的文件解压:将resources_cn.jar放到安装目录下的lib目录下即可 重启 ...

  3. HashMap Hashtable TreeMap LinkedHashMap 分析

    首先对hash的了解:就是关键字,和数据建立关系的映射. hash常用算法:假设我们中的字符有相应的内部编码,当然在实际过程中,我们不可能将所有的编码当做hash值. 平方取中法,将所得的内部编码平方 ...

  4. 7-Java-C（冰雹数）

    题目描述: 任意给定一个正整数N, 如果是偶数,执行: N / 2 如果是奇数,执行: N * 3 + 1 生成的新的数字再执行同样的动作,循环往复. 通过观察发现,这个数字会一会儿上升到很高, 一会 ...

  5. numpy次方计算

    >>> 2**np.arange(3, 6) array([ 8, 16, 32])

  6. Openjudge-4115-佐助和鸣人

    这一题是一道广搜的题目,首先我们通过读入字符串读入每一行,然后顺带找到鸣人的位置. 然后我们初始化之后,就进行广搜,还是广搜的格式,但是要压入队列的条件我们可以稍微变一变,我们可以直接判断下一个要走的 ...

  7. Python自动化测试框架——断言

    在自动化测试执行的过程中,我们往往希望可以自定生成报告,那如何再测试中进行验证呢?我们使用断言 import unittest class TestCount(unittest.TestCase): ...

  8. MariaDB数据库（二）

    1. MariaDB数据类型 MariaDB数据类型可以分为数字,日期和时间以及字符串值. 使用数据类型的原则:够用就行,尽量使用范围小的,而不用大的. 1.1  常用的数据类型 整数:int,bit ...

  9. webpack 之 plugin

    loader和plugins的区别是:前者处理单个文件,而后者作用于整个打包过程 内置插件:BannerPlugin 可以在打包后的文件上方添加备注信息,如版权说明等 // webpack.confi ...

  10. Python能干啥？

    Python之py9 Python之py9-录音自动下载 Python之py9-py9作业检查 Python之py9-py9博客情况获取 Python之py9-微信监控获取mp3_url Python ...