目 录
1、遮罩层的制作
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.modal {
background: black;
position: fixed;
left: 0;
top: 0;
right: 0;
bottom: 0;
opacity: 0.4;
}
</style>
</head>
<body>
<input type="button" value="显示">
<div class="modal">1</div>
<div class="info">2</div>
</body>
</html>2、信息层
主要是白色底的一个盒子。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.modal {
background: black;
position: fixed;
left: 0;
top: 0;
right: 0;
bottom: 0;
opacity: 0.4;
}
.info {
position: fixed;
background-color: white;
width: 400px;
height: 300px;
left: 50%;
top: 50%;
margin-top: -150px;
margin-left: -200px;
}
</style>
</head>
<body>
<input type="button" value="显示">
<div class="modal">1</div>
<div class="info">2</div>
</body>
</html>3、往白色的块里添加表单
简单的调整样式
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.modal {
background: black;
position: fixed;
left: 0;
top: 0;
right: 0;
bottom: 0;
opacity: 0.4;
}
.info {
position: fixed;
background-color: white;
width: 400px;
height: 300px;
left: 50%;
top: 50%;
margin-top: -150px;
margin-left: -200px;
}
form {
width: 80%;
height: 40%;
/*background-color: yellow;*/
margin: 50px auto 0;
}
</style>
</head>
<body>
<input type="button" value="显示">
<!--遮罩层-->
<div class="modal">1</div>
<!--信息层-->
<div class="info">
<!-- 表单-->
<form action="">
姓名：<input type="text" name="username"> <br>
<input type="submit" value="提交">
<input type="button" value="取消">
</form>
</div>
</body>
</html>✨多谢观看~