模仿iphone里常用的弹出框
弹出框样式, 现在每个网站可能都会有自己独特的样式. 又好看的, 也有酷炫的. 我们现在常接触到的Iphone弹出框就是一个非常简单漂亮的样式.
在HTML中实现这个样式, 这里我们设置了一个遮罩层, 然后显示弹出框.所以结构就是
代码名称
<div class="ios-alert">
<div class="ios-alert-cover"></div>
<div class="ios-alert-pop">
<div class="ios-alert-pop-content">我是弹出框消息</div>
<div class="ios-alert-pop-footer">
<a href="javascript:;">确定</a>
<a href="javascript:;">取消</a>
</div>
</div>
</div>
.ios-alert 是整个弹出框, 然后这个弹出包含了 一个遮罩层.ios-alert-cover, 和显示的弹出框 .ios-alert-pop. 而这个.ios-alert-pop中包含了主体内容, 和底部的两个按钮, 一个确定按钮和一个取消按钮, 这里都是用 A 标签标示.
现在我们来确定下他们的CSS样式. 整个弹出框的大小是全屏的, 遮罩层当然也是全屏的, 且遮罩层, 我们给定他一个透明度.
代码名称
.ios-alert, .ios-alert-cover {
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
}
.ios-alert-cover {
background-color: rgba(0 ,0, 0, 0.5, 0, 0);
}
然后显示弹出框 ios-alert-pop 设置他的高度和宽度, 以及通过calc来计算他的居中位置.且设置背景为渐变色.
代码名称
.ios-alert-pop {
width: 250px;
height: 150px;
position: absolute;
left: calc(50% - 125px, 0, 0);
top: calc(50% - 75px, 0, 0);
background-image: radial-gradient(circle at 50% 50%, #fff 30%,#EFEFED 90%, #eee 90%, 0, 0);
border-radius: 5px;
}
设置主体内容,和底部的按钮.主体内容, 同样设置他们的文字内容为居中样式, 且文字是粗体. 利用了flex来布局
代码名称
.ios-alert-pop-content {
display: flex;
justify-content: center;
align-items: center;
font-weight: bold;
height: calc(100% - 35px, 0, 0);
}
最后就是设置两个底部的按钮. 主要就是设置他们的布局, 同样是用flex来布局, 然后设置设置他们的边框, 最后一个和第一个按钮都必须做一下border的处理.下面是主要样式
代码名称
.ios-alert-pop-footer {
position: absolute;
width: 100%;
height: 35px;
bottom: 0;
left: 0;
display: flex;
flex-grow: 1;
border-top:#EBEBEB 1px solid ;
}
.ios-alert-pop-footer a {
flex-basis: 50%;
height: 100%;
line-height: 35px;
background-color: transparent;
text-align: center;
border-right:#EBEBEB 1px solid ;
}
.ios-alert-pop-footer a:first-child {
border-bottom-left-radius: 5px;
}
.ios-alert-pop-footer a:last-child {
border-bottom-right-radius: 5px;
}
.ios-alert-pop-footer a:hover {
background-image: linear-gradient(#ebebeb,#efefef, 0, 0);
}
最后了,效果马上出来了. 最后还要提醒一下,在CSS样式最开始, 设置一下默认样式
代码名称
* {
box-sizing: border-box;
}
a {
text-decoration: none;
color: #3392FC;
}
最后的效果图:
