<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. SEO 第八章

    SEO第八章 本次课目标: 1.  网站外部优化的外链优化 2.  网站流量分析 1.  什么叫做外链? 外链也叫反向链接,指的是从别的网站指向我自己的网站的链接. 2.  外链的作用? l  外链可 ...

  2. 嵌入式ARM开发板学习方法步骤

    嵌入式开发就是指在嵌入式操作系统下进行开发,一般常用的系统有linux,android. 平台:Cortex-A9开发板 嵌入式技术学习如何入手,从何学起呢, 以下内容简单介绍嵌入式开发的学习步骤及如 ...

  3. 超不清视频播放器-用Python将视频转成字符

    前言 今天分享的这段代码,看起来没啥实际用处,而且有些反潮流,因为现如今大家看视频都追求更高分辨率的超清画质,而我们这个,是一个“超不清”的视频播放器:在控制台里播放视频,用字符来表示画面 不过我觉得 ...

  4. (转载)RedHat Enterprise Linux 5 安装GCC

    注:在RedHat Enterprise Linux 5使用gcc编译第一个程序时,发现其gcc并未安装.在网上搜索看到这篇帖子.遂转到此处进行学习.感谢博客园中的“风尘孤客”的分享.@风尘孤客 Ab ...

  5. nginx发布web网站

    修改/conf/nginx.conf配置文件 server { listen *:; # Listen server_name ""; # Don't worry if " ...

  6. C指针与数组之间的细节

    看以下代码: #include <stdio.h> void f(char**); int main() { char *argv[] = { "ab", " ...

  7. CF666E Forensic Examination SAM+倍增，线段树和并

    题面: 给你一个串S以及一个字符串数组T[1..m],q次询问,每次问S的子串S[p_l..p_r]在T[l..r]中的哪个串里的出现次数最多,并输出出现次数.如有多解输出最靠前的那一个. 分析: 第 ...

  8. java.sql.SQLException: Data truncated for column 'lastSeason' at row 1

    在使用项目将数据存储到 datetime 的字段 ,抛出了这个异常 而我是使用Java.util.Date 存储过去的 解决代码如下: Date date = new Date(); demo.set ...

  9. POJ 2349 Arctic Network（贪心 最小生成树）

    题意: 给定n个点, 要求修p-1条路使其连通, 但是现在有s个卫星, 每两个卫星可以免费构成连通(意思是不需要修路了), 问修的路最长距离是多少. 分析: s个卫星可以代替s-1条路, 所以只要求最 ...

  10. 【Codeforces 1107D】Compression

    [链接] 我是链接,点我呀:) [题意] 题意 [题解] 先把所给的压缩形式的字符串转成二进制 然后对获得的01数组做一个前缀和(a[i][j]=以(i,j)为右下角,(1,1)为左上角的矩形内的数字 ...