<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. tac命令

    tac——显示文件内容(反列显示) 命令所在路径:/usr/bin/tac 示例1: # tac /etc/hosts 反列显示/etc/目录下hosts文件内容 ☛适合查看内容较短的文件

  2. iptables规则的关系

    iptables规则的关系,是自上而下进行过虑的.所以添加规则时,要通过文件进行添加,这样的话,可以控制其顺序. A机器: [root@www ~]# netstat -an | grep 6100 ...

  3. 手把手教你免费把网站IP换成1.1.1.1/1.0.0.1

    近日,Cloudflare官方发文,与APNIC官方合作打算用IP1.1.1.1推出速度更快.私密性更强的DNS Cloudflare 运行全球规模最大.速度最快的网络之一. APNIC 是一个非营利 ...

  4. Android（java）学习笔记181：多媒体之图片画画板案例

    1.首先我们编写布局文件activity_main.xml如下: <RelativeLayout xmlns:android="http://schemas.android.com/a ...

  5. Android（java）学习笔记163：开发一个多界面的应用程序之界面间数据传递

    1.界面跳转的数据传递 (1)intent.setData() --> intent.getData():     传递的数据比较简单,一般是文本类型的数据String:倘若我们传递的数据比较复 ...

  6. tomcat 安全配置文档

    1.配置文档中使用$CATALINA_HOME变量声明为tomcat的安装目录并明确写出了tomcat的配置文件路径,此路径为测试环境的路径,线上系统对应配置文件的路径可能不一样,在进行相关配置时,应 ...

  7. Spring-01 注解实现IOC

    Spring框架四大原则 使用pojo进行轻量级和最小侵入式开发. 通过依赖注入和基于接口编程实现松耦合. 使用AOP和默认习惯进行声明式编程. 使用AOP和模板(template)减少模式化代码. ...

  8. 日常[系统]：Linux新人报到（吐槽%&%……&￥……%

    昨天换了系统,从win7换到了NOIP必须面对的Linux系统. 不得不说,真的很不适应.原本右上角的三个按钮变到了左上角. 可爱的DEVCPP被无情的抛弃了. 又用不惯guide,只好用文本编辑器写 ...

  9. [bzoj4899]记忆的轮廓 题解(毒瘤概率dp)

    题目背景 四次死亡轮回后,昴终于到达了贤者之塔,当代贤者夏乌拉一见到昴就上前抱住了昴“师傅!你终于回来了!你有着和师傅一样的魔女的余香,肯定是师傅”.众所周知,大贤者是嫉妒魔女沙提拉的老公,400年前 ...

  10. ios 之sqllite

    iOS sqlite数据库操作.步骤是: 先加入sqlite开发库libsqlite3.dylib, 新建或打开数据库, 创建数据表, 插入数据, 查询数据并打印 1.新建项目sqliteDemo,添 ...