pop 弹出层

来源：互联网发布：dhtmlhistory.js下载编辑：程序博客网时间：2024/05/22 18:24

最近好像做了很多弹出层

但并不一定是嘴简单代码的.

基本上是一样样式的,所以贴上来分享一下.

html:

<divclass="take_money">

<divclass="take_money_inner">

<divclass="img_box">

<imgsrc="../img/take_money_inner.jpg"/>

</div>

<divclass="content">

</div>

<buttonclass="btn_sure">确定</button>

<aclass="close_takemoney"> close take money</a>

</div>

css:

.take_money{

position:fixed;

z-index:10;

top:0;

height:667px;

background-color:rgba(0,0,0,.7);

padding:012%;

display:none;

width:76%

}

.take_money_inner{

margin-top:20%;

background-color:#fff;

border:1pxsolid#eee;

border-radius:.5rem;

text-align:center;

position:relative;

padding: 2.2rem10%;

text-align:center;

}

.take_money.img_box{

width:60%;

margin:0auto;

}

.invite_more.img_box{

width:80%;

margin-top:-1.8rem;

}

.share_more.img_box{

width:100%;

margin-bottom:1.2rem;

}

.take_money.img_boximg{

width:100%;

}

.take_money.content{

font-family:"microsoft yahei";

font-size:1.95rem;

margin:0;

}

.take_money.contentpspan,

.share_more.contentpspan,

.invite_more.contentpspan{

font-size:1.46rem;

color:#808080;

margin-top: .6rem;

display:block;

}

.btn_sure{

color:#fff;

font-size:1.66rem;

background-color:#f21642;

border-radius:.4rem;

text-align:center;

font-family:"microsoft yahei";

width:100%;

border:1pxsolid#F21642;

height:3.2rem;

line-height:3.2rem;

margin-top:1.6rem;

}

.close_takemoney{

position:absolute;

top: .4rem;

right: .4rem;

width: 2rem;

height: 2rem;

background: url(../img/close_pop.jpg) center no-repeat #fff;

background-size:contain;

text-indent: -999rem;

border:1pxsolidrgba(255,255,255,.5);

border-radius: 1rem

}

js:

$(function() {

$('.take_money').height($(window).height());

$('.take_money_inner').css('margin-top',($(window).height()-$('.take_money_inner').height())/2);

$('.close_takemoney').click(function() {

$('.take_money').fadeOut(1000);

});

})

效果图:

完哈,完

0 0