这篇文章写法有问题,有空的时候会重新更新
据说大师的成长的路线是这样的:
follow the rule >>>>>>break the rule >>>>>>>be the rule
而作为前端小白,当然第一步就是空闲的时候多练习造轮子了。
一般来说弹出层都要解决2个问题:
1.弹出层后,禁用html和body滚动
2.入场动画的制作
我们先看一下效果图:
1.HTML 页面
<div class="main-container grid">
<div class="box">
弹出对话框
</div>
</div>
<div class="dialogue-mask">
<div class="dialogue-container">
<div class="dialogue-title border-bottom">
对话框标题
</div>
<div class="dialogue-content border-bottom">
这里是对话框内容,比如:你确定要提交调查信息吗?
</div>
<div class="dialogue-btn clear-float">
<div class="dialogue-sure">
确认
</div>
<div class="dialogue-cancel">
取消
</div>
</div>
</div>
</div>
2.CSS样式
.grid{
background-image:-webkit-linear-gradient(top,
transparent 49px,
#bfbebe 50px),
-webkit-linear-gradient(left,
transparent 49px,
#bfbebe 50px);
background-size:50px 50px;
background-repeat:repeat; /*先画个网格,便于布局*/
}
/*主容器*/
.main-container{
position:absolute;
left:0;
top:0;
width:100%;
height:1000px;
}
/*BOX*/
.box{
width:100px;
height:50px;
background-color:grey;
margin:100px;
position:relative;
color:white;
text-align:center;
line-height:50px;
}
.box-style{
/* margin-top:10px;
transition-property:margin-top;
transition-duration:2s;
transition-timing-function: ease-out;
transition-delay:0;*/
width:200px;
height:100px;
transition:width 1s ease-in-out,height 4s 1s ease-out;
}
/**/
.good-noon{
position:relative;
width:100px;
height:50px;
border:1px solid black;
/*-webkit-animation:demo 10s;*/
-webkit-animation-name:demo;
-webkit-animation-duration:2s;
-webkit-animation-timing-function:ease-in;
-webkit-animation-delay:0s;
-webkit-animation-iteration-count:1;
-webkit-animation-direction:alternate;
-webkit-animation-fill-mode:backwards;
}
@-webkit-keyframes demo{
0% {left:0;background-color:white;}
50% {left:200px;background-color:yellow;}
100% {left:0px;background-color:red;}
}
/**/
div{
box-sizing:border-box;
}
.dialogue-mask{
position:absolute; /*弹出层*/
left:0;
top:0;
width:100%;
height:100%;
background-color:rgba(128,128,128,0.5);
display:none;
overflow:auto;
}
.dialogue-container{
position:absolute;
width:80%;
left:50%;
top:40%;
box-sizing:border-box;
-webkit-transform:translate(-50%,-50%);
background-color:white;
box-shadow: 1px 1px 1px 1px #cdcfda;
border-radius: 10px;
padding:15px;
display:block;
z-index:2;
}
.dialogue-title{
font-size:16px;
font-weight:bold;
line-height:30px;
position:relative;
}
.border-bottom::after{
content:"";
width:100%;
height:1px;
position:absolute;
bottom:0;
left:0;
background-color:#b9b9b9;
-webkit-transform:scaleY(0.5);
}
.dialogue-content{
font-size:14px;
line-height:25px;
position:relative;
}
.dialogue-btn{
margin-top:10px;
}
.clear-float::after{
content:"";
display:block;
clear:both;
}
.dialogue-cancel{
float:right;
margin-right:20px;
padding: 8px 25px;
color:grey;
background-color:white;
border-radius:3px;
border:1px solid #e2e1e1;
}
.dialogue-sure{
float:right;
padding: 8px 25px;
color:white;
background-color:#229ffd;
border-radius:3px;
}
@-webkit-keyframes dialogue-in{
0% {top:0;}
50% {top:40%;}
90% {top:37%;}
100% {top:40%;}
}
.animation-dialogue-in{
display:block;
-webkit-animation:dialogue-in 0.5s cubic-bezier(0.215, 0.610, 0.355, 1.000);
}
/*隐藏滚动条*/
.forbid-scroll{
height:100%;
overflow:hidden;
}
3.JS
$(".box").click(function(){
$(".dialogue-mask").show();
$(".dialogue-container").addClass("animation-dialogue-in");
$("body,html").addClass("forbid-scroll");//弹出层后,禁用body和html滚动
});
$(".dialogue-cancel").click(function(){
$(".dialogue-mask").hide();
$(".dialogue-container").removeClass("animation-dialogue-in");
$("body,html").removeClass("forbid-scroll");
})
$(".dialogue-sure").click(function(){
console.log("You have clicked the sure button");
});