效果图
css代码
<style type="text/css" >
body{
font-family: "Microsoft YaHei" ! important;
}
/*灰色遮罩层*/
.fade{
width:100%;
height:100%;
background:rgba(0, 0, 0, 0.5);
position: fixed;
left: 0;
top: 0;
z-index: 99;
}
/*弹出层*/
.succ-pop{
width: 400px;
height: 300px;
background: #fff;
position: fixed;
left: 50%;
top: 50%;
margin-left: -200px;
margin-top: -150px;
z-index: 999;
border-radius: 5px;
}
.succ-pop h3.title{
text-align: center;
font-size: 22px;
color: #ce002c;
}
</style>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
html代码
<div class="fade"></div>
<div class="succ-pop">
<h3 class="title">
中间填写内容
</h3>
</div>
- 1
- 2
- 3
- 4
- 5
- 6
效果图
css代码
<style type="text/css" >
body{
font-family: "Microsoft YaHei" ! important;
}
/*灰色遮罩层*/
.fade{
width:100%;
height:100%;
background:rgba(0, 0, 0, 0.5);
position: fixed;
left: 0;
top: 0;
z-index: 99;
}
/*弹出层*/
.succ-pop{
width: 400px;
height: 300px;
background: #fff;
position: fixed;
left: 50%;
top: 50%;
margin-left: -200px;
margin-top: -150px;
z-index: 999;
border-radius: 5px;
}
.succ-pop h3.title{
text-align: center;
font-size: 22px;
color: #ce002c;
}
</style>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
html代码
<div class="fade"></div>
<div class="succ-pop">
<h3 class="title">
中间填写内容
</h3>
</div>
- 1
- 2
- 3
- 4
- 5
- 6