<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. Python 学习日志9月21日

    9月21日 周四 今天是个特殊的日子吗,总感觉9月21这个日子听着怪怪的. 今天早晨看<Head First HTML and CSS>第13章节“表格和更多列表”,内容不多,看完并做了详 ...

  2. DROP DOMAIN - 删除一个用户定义的域

    SYNOPSIS DROP DOMAIN name [, ...] [ CASCADE | RESTRICT ] DESCRIPTION 描述 DROP DOMAIN 将从系统表中删除一个用户域. 只 ...

  3. uva1612 Guess

    和cf的打分有点像啊 因为一共只有三道题,所以每个人的得分最多有8种可能性.把这8种可能性都算出来,存在数组里,排好序备用排名就是一个天然的链表,给出了扫描的顺序扫描时,维护两个变量:前一个playe ...

  4. eclipse生成spring boot jar包

    1.右击项目,选择Run As - Maven clean 2.右击项目,选择Run As - Maven install 3.成功后 会在项目的target文件夹下生成jar包 4.将打包好的jar ...

  5. struct获取不到值的小错误

    struct2 get set 这两个方法一定要用双骆驼命名法:getA() setA(),        而geta() seta()不行 我找了好久的错误,只能说框架这东西快捷方便,找起错误要人命

  6. CF993E Nikita and Order Statistics 多项式卷积 快速傅里叶变换

    题意: 给你一个数组a1~an,对于k=0~n,求出有多少个数组上的区间满足:区间内恰好有k个数比x小.x为一个给定的数.n<=10^5.值域没有意义. 分析: 大神们都说这道题是一个套路题,真 ...

  7. Informatica抽取SQL Server数据库乱码

    1.首先确认数据库的关系连接所使用的代码页,是否一致 2.如果上述方法不行,在Designer中更改数据类型,将string类型改为nstring类型,中文就没有乱码了 3.SQL Server数据库 ...

  8. “打开ftp服务器上的文件夹时发生错误，请检查是否有权限访问该文件夹"

    阿里云虚拟主机上传网站程序 问题场景:网页制作完成后,程序需上传至虚拟主机 注意事项: 1.Windows系统的主机请将全部网页文件直接上传到FTP根目录,即 / . 2. 如果网页文件较多,上传较慢 ...

  9. ffmpeg mp4 mp3 wav flac webm aac ac3 ogg格式转换

    版权声明:本文为博主原创文章,未经允许不得转载. ffmpeg是Linux中转换音频视频文件的常用工具. mp4 to mp3: ffmpeg -i $ID.mp4 -acodec libmp3lam ...

  10. 基于flask的网页聊天室（二）

    基于flask的网页聊天室(二) 前言 接上一次的内容继续完善,今天完成的内容不是很多,只是简单的用户注册登录,内容具体如下 具体内容 这次要加入与数据哭交互的操作,所以首先要建立相关表结构,这里使用 ...