绝对定位与固定定位——模态框案例
程序员文章站
2022-03-24 09:32:48
...
登录是使用遮罩功能——模态框
页头部分
- html:
<header>
<h2>我的博客</h2>
<button onclick="document.querySelector('.modal').style.display='block'">
登录
</button>
</header>
- css
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background-color: #eee;
}
header {
background-color: lightseagreen;
padding: 0.5em 1em;
display: flex;
}
header button {
margin-left: auto;
width: 4em;
}
模态框部分
- html:
<div class="modal">
<!-- 半透明的遮罩 -->
<div
class="modal-bg"
onclick="this.parentNode.style.display='none'"
></div>
<form action="" class="modal-form">
<fieldset>
<legend>用户登录</legend>
<div>
<label for=""> 用户名: </label>
<input type="text" />
</div>
<div>
<label for="">密码:</label>
<input type="password" />
</div>
<div><button>登录</button></div>
</fieldset>
</form>
</div>
- CSS:
.modal {
position: relative;
}
.modal .modal-form fieldset {
background-color: lightcyan;
border: none;
padding: 2em;
box-shadow: 0 0 5px #888;
}
.modal .modal-form fieldset legend {
padding: 5px 1em;
background-color: rebeccapurple;
color: white;
}
.modal .modal-form {
position: fixed;
top: 10em;
left: 20em;
right: 20em;
}
.modal .modal-bg {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: rgb(0, 0, 0, 0.5);
}
.modal {
display: none;
}
页面加载效果:
点击登录按钮后效果:
点击模态框任意部分,取消登录,回到加载状态。