弹出层的实现方式

最新推荐文章于 2021-08-25 19:43:30 发布

weixin_34411563

最新推荐文章于 2021-08-25 19:43:30 发布

阅读量118

点赞数

文章标签： python

原文链接：https://my.oschina.net/bosscheng/blog/332827

版权

2019独角兽企业重金招聘Python工程师标准>>>

实现方式一：

例如需要居中显示的是一个“菊花”转圈效果，它的宽度和高度都是72px。

对于父层的实现(不兼容IE6的)

position:fixed
top:0;
left:0;
right:0;
bottom:0;
background:#000;
opacity:0.3;
z-index:9999;

对于子层的实现

position:absolute;
top:50%;
left:50%;
width:72px;
height:72px;
margin:-36px 0 0 -36px;
padding:0;
background: url("chrysanthemum.jpg") no-repeat;
z-index:10000;

实现方式二：

对于弹出层的实现

对于父层的实现（兼容IE6的）

var b = document.documentElement.clientHeight? document.documentElement: document.body;
var height = Math.max(b.scrollHeight,b.clientHeight);
var width = Math.max(b.scrollWidth,b.clientHeight);

this.css({
    position:"absolute";
    background:"black";
    "z-index":9980;
    width:width + "px";
    height:height + "px";
    top:0;
    left:0;
    margin:0;
    padding:0;
    opacity:.15;
})

关于子层的实现

var top = ($(window).height() - this.$el.outerHeight(true))/2 + $(window).scrollTop();
var left = ($(window).width() - this.$el.outerWitdh(true))/2 + $(window).scrollLeft();

this.css({
    top: top > 0? top:0,
    left: left> 0 ? left: 0,
    "z-index":9990,
    position:"absolute"
})

转载于:https://my.oschina.net/bosscheng/blog/332827