效果：
HTML：
CSS（弹出内容、遮罩层样式）
/* 遮罩层 */
.black_overlay{
display: none;
position: absolute;
top: 0%;
left: 0%;
width: 100%;
height: 100%;
background-color: black;
z-index: 98;
-moz-opacity: 0.8;
opacity:.30;
filter: alpha(opacity=88);
}
.content_box {
display: none;
position: absolute;
overflow: auto;
width: 76vw;
height: 40vw;
background-color: #fff;
top: 34%;
left: 12vw;
z-index: 99;
}
.content_box_one {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
font-size: 16px;
/* font-weight: bold; */
letter-spacing: 1px;
margin-top: 3vw;
text-shadow: 0 0 1px #000;
}
.content_box_two {
font-size: 14px;
letter-spacing: 1px;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
margin-top: 1vw;
}
.content_box_three {
width: 80%;
height: 8vw;
margin-left: 10%;
background-color: #ecf6f9;
border-radius: 20vw;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
margin-top: 2vw;
}
.content_box_three_input {
background-color: #ecf6f9;
outline: none;
border: none;
width: 84%;
/* height: 26px; */
/* margin-top: 3px; */
/* margin-left: 5%; */
font-size: 14px;
letter-spacing: 1px;
}
.content_box_three_input::-webkit-input-placeholder {
color: rgb(136, 136, 136);
font-size: 14px;
}
.content_box_three_input:focus {
color: #000;
font-size: 14px;
}
.content_box_three_input:focus{
border:none;
font-size: 14px;
}
.content_box_four {
width: 60vw;
display: flex;
flex-direction: row;
margin-top: 5vw;
margin-left: 8vw;
}
.content_box_four_btn1 {
width: 12vw;
background-color: #fff;
border: 1px solid rgb(156, 156, 156);
color: #000;
margin-left: 12vw;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
padding: 0.5vw 0;
border-radius: 1.5vw;
}
.content_box_four_btn2 {
width: 12vw;
background-color: #00b3a8;
border: 1px solid rgb(156, 156, 156);
color: #fff;
margin-left: 12vw;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
padding: 0.5vw 0;
border-radius: 1.5vw;
}
参考来源：https://www.jb51.net/article/112380.htm