原生模态框,遮罩层
<!
DOCTYPE
html
>
<
html
lang=
"en"
>
<
head
>
<
meta
charset=
"UTF-8"
/>
<
meta
name=
"viewport"
content=
"width=device-width, initial-scale=1.0"
/>
<
meta
http-equiv=
"X-UA-Compatible"
content=
"ie=edge"
/>
<
title
>Document
</
title
>
<
style
>
body {
background-color:
#000000; }
ul,
li {
list-style:
none;
padding:
0;
margin:
0; }
.div1 {
position:
fixed;
left:
0;
right:
0;
top:
100px;
margin:
0
auto;
width:
345px;
height:
256px;
background:
#ffffff;
border-radius:
5px;
overflow:
hidden;
z-index:
100; }
.line {
width:
343px;
border:
1px
dashed
#ebebeb;
margin-top:
22px; }
.q1 {
max-width:
250px;
height:
20px;
font-size:
20px;
font-family: PingFang-SC-Heavy;
font-weight:
bold;
color:
rgba(
52,
52,
52,
1);
line-height:
20px;
margin-top:
30px; }
.q2 {
max-width:
250px;
height:
19px;
font-size:
19px;
font-family: PingFang-SC-Bold;
font-weight:
bold;
color:
rgba(
52,
52,
52,
1);
line-height:
19px;
margin-top:
9px; }
.q3 {
max-width:
250px;
height:
19px;
font-size:
19px;
font-family: PingFang-SC-Bold;
font-weight:
bold;
color:
rgba(
52,
52,
52,
1);
margin-top:
10px;
line-height:
19px; }
.q4 {
max-width:
250px;
height:
15px;
font-size:
16px;
font-family: PingFang-SC-Medium;
font-weight:
500;
color:
rgba(
102,
102,
102,
1);
margin-top:
12px;
line-height:
15px; }
li {
margin:
0
auto;
text-align:
center; }
.b1 {
width:
113px;
height:
41px;
background:
#b4b3b3;
border-radius:
21px;
border:
0;
margin:
24px
0
0
34px;
font-size:
16px;
color:
#ffffff; }
.b2 {
width:
113px;
height:
41px;
background:
#cbaf7d;
border-radius:
21px;
border:
0;
margin-left:
50px;
font-size:
16px;
color:
#ffffff; }
.shield {
position:
fixed;
background:
rgba(
0,
0,
0,
0.4);
width:
100%;
height:
100%;
left:
0;
top:
0;
z-index:
90; }
<
/
style
>
</
head
>
<
body
>
<
div
>
<
div
class=
"div1"
>
<
ul
style=
"
width:100%;"
>
<
li
class=
"q1"
>哈哈哈哈中信营业厅
</
li
>
<
li
class=
"q2"
>高尧三
</
li
>
<
li
class=
"q3"
>汉中门分店
</
li
>
<
li
class=
"q4"
>会员有效期：2020-10-10
</
li
>
</
ul
>
<
div
class=
"line"
></
div
>
<
div
>
<
button
class=
"b1"
>取消
</
button
>
<
button
class=
"b2"
>确定
</
button
>
</
div
>
</
div
>
<
div
class=
"shield"
></
div
>
</
div
>
</
body
>
</
html
>
<!
DOCTYPE
html
>
<
html
lang=
"en"
>
<
head
>
<
meta
charset=
"UTF-8"
/>
<
meta
name=
"viewport"
content=
"width=device-width, initial-scale=1.0"
/>
<
meta
http-equiv=
"X-UA-Compatible"
content=
"ie=edge"
/>
<
title
>Document
</
title
>
<
style
>
body {
background-color:
#000000; }
ul,
li {
list-style:
none;
padding:
0;
margin:
0; }
.div1 {
position:
fixed;
top:
0;
left:
0;
width:
345px;
height:
256px;
background:
#ffffff;
border-radius:
5px;
overflow:
hidden;
z-index:
100; }
.line {
width:
343px;
border:
1px
dashed
#ebebeb;
margin-top:
22px; }
.q1 {
max-width:
250px;
height:
20px;
font-size:
20px;
font-family: PingFang-SC-Heavy;
font-weight:
bold;
color:
rgba(
52,
52,
52,
1);
line-height:
20px;
margin-top:
30px; }
.q2 {
max-width:
250px;
height:
19px;
font-size:
19px;
font-family: PingFang-SC-Bold;
font-weight:
bold;
color:
rgba(
52,
52,
52,
1);
line-height:
19px;
margin-top:
9px; }
.q3 {
max-width:
250px;
height:
19px;
font-size:
19px;
font-family: PingFang-SC-Bold;
font-weight:
bold;
color:
rgba(
52,
52,
52,
1);
margin-top:
10px;
line-height:
19px; }
.q4 {
max-width:
250px;
height:
15px;
font-size:
16px;
font-family: PingFang-SC-Medium;
font-weight:
500;
color:
rgba(
102,
102,
102,
1);
margin-top:
12px;
line-height:
15px; }
li {
margin:
0
auto;
text-align:
center; }
.b1 {
width:
113px;
height:
41px;
background:
#b4b3b3;
border-radius:
21px;
border:
0;
margin:
24px
0
0
34px;
font-size:
16px;
color:
#ffffff; }
.b2 {
width:
113px;
height:
41px;
background:
#cbaf7d;
border-radius:
21px;
border:
0;
margin-left:
50px;
font-size:
16px;
color:
#ffffff; }
.shield {
position:
fixed;
background:
rgba(
0,
0,
0,
0.4);
width:
100%;
height:
100%;
left:
0;
top:
0;
z-index:
90; }
<
/
style
>
</
head
>
<
body
>
<
div
>
<
div
class=
"div1"
>
<
ul
style=
"
width:100%;"
>
<
li
class=
"q1"
>哈哈哈哈中信营业厅
</
li
>
<
li
class=
"q2"
>高尧三
</
li
>
<
li
class=
"q3"
>汉中门分店
</
li
>
<
li
class=
"q4"
>会员有效期：2020-10-10
</
li
>
</
ul
>
<
div
class=
"line"
></
div
>
<
div
>
<
button
class=
"b1"
>取消
</
button
>
<
button
class=
"b2"
>确定
</
button
>
</
div
>
</
div
>
<
div
class=
"shield"
></
div
>
</
div
>
</
body
>
</
html
>
扫码关注我们
微信号：SRE实战
拒绝背锅 运筹帷幄
更多精彩
