Sticker-footer弹出层布局

前端布局中，经常需要用到点击弹出层这种场景，Sticker-footer布局就派上用场了。
下面演示该场景用于在vue.js项目中。

1.新建base.js

.clearfix{

display: inline-block;

}

.clearfix:after{

display: block;

content: ".";

height: 0;

line-height: 0;

clear: both;

visibility: hidden;

}

2.将base.js引入到index.html中

< html >

< head >

< meta charset= "utf-8" >

< meta name= "viewport" content= "width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" >

< title >search </ title >

< link rel= "stylesheet" type= "text/css" href= "static/css/reset.css" >

< link rel= "stylesheet" type= "text/css" href= "static/css/iconfont.css" >

<link rel="stylesheet" type="text/css" href="static/css/base.css">//在此引入

</ head >

< body >

< div id= "app" ></ div >

<!-- built files will be auto injected -->

</ body >

</ html >

3.在div+css中应用布局

< div class= "detail" v-show=" detailShow" >

< div class= "detail-wrapper clearfix" >

</ div >

< div class= "detail-close" @click=" hideDetail()" >

< i class= "iconfont icon-close" ></ i >

</ div >

</ div >

.detail{

position: fixed;

top: 0;

left: 0;

z-index: 100;

width: 100%;

height: 100%;

overflow: auto;

background: rgba( 7, 17, 27, 0.8);

.detail-wrapper{

min-height: 100%;

width: 100%;

}

.detail-close{

position: relative;

width: 32px;

height: 32px;

margin: -64px auto;

clear: both;

font-size: 32px;

.iconfont{

& .icon-close{

color: white;

height: 64px;

width: 64px;

}

}

}

}

默认是占据全屏半透明的，根据实际情况修改即可，这个方法真的很实用，哈哈，以后弹出层布局就方便了，你学会了吗？