<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. 语音行业技术领先者Nuance诚招ASR/NLP研发工程师和软件工程师

    Nuance is a leading provider of voice and language solutions for businesses and consumers around the ...

  2. 3.12 在运算和比较时使用NULL值

    问题:NULL值永远不会等于或不等于任何值,也包括NULL值自己,但是需要像计算真实值一样计算可为空列的返回值.例如,需要在表emp中查出所有比“WARD”提成(COMM)低的员工,提成为NULL(空 ...

  3. JQuery 获得绝对,相对位置的坐标方法

    获取页面某一元素的绝对X,Y坐标,可以用offset()方法:(body属性设置margin :0;padding:0;) var X = $('#DivID').offset().top; var ...

  4. Python3简明教程（二）—— 变量和数据类型

    关键字和标识符 下列的标识符是Python3的关键字,并且不能用于通常的标识符.关键字必须严格按照下面的拼写: False def if raise None del import return Tr ...

  5. index 定义 v-for 未使用变量 实际是没有 :key="index"

    需要有 :key="index" <Checkbox :label="item.key" :key="index" v-for=&qu ...

  6. sql中group by

    某图书馆收藏有书籍具有不同的出版年份,管理员需要做一下统计工作: (1)每一年书籍的数目,如: 2000年有10本书, 2001年有5本书... (2)每一种书籍的数目,如: 西游记有10本, 三国演 ...

  7. Openjudge-4110-圣诞老人的礼物

    这一题是一道贪心的题目,但是它比较特殊的地方在于糖果可以分开拿,我们不必整箱拿,所以我们可以直接就把糖果按照价值比从大到小排序,然后整箱装不下的时候,剩余重量乘以它的价值比,这样就算出来了. 对于结构 ...

  8. 分享一款非常好用的Fatkun图片批量下载工具

    Fatkun图片批量下载 相信大家一定遇到过有着大量精美图片的网页,譬如美女照片.各种壁纸.设计素材.甚至是1024套图等等,但常常几十上百张的图要一张张手工去点击下载实在能让人抓狂!小编的工作中也常 ...

  9. Python数据可视化库-Matplotlib（二）

    我们接着上次的继续讲解,先讲一个概念,叫子图的概念. 我们先看一下这段代码 import matplotlib.pyplot as plt fig = plt.figure() ax1 = fig.a ...

  10. HTML、CSS 和 JS框架之Bootstrap

    一.Bootstrap简介: Bootstrap 是最受欢迎的 HTML.CSS 和 JS 框架,用于开发响应式布局.移动设备优先的 WEB 项目. 详细参考内容:Bootstrap_v3 二.Boo ...