<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>定位实战：模态框</title></head><body><header><h2 class="title">这是一个测试博客</h2><button onclick="document.querySelector('.modal').style.display='block'">登录</button></header><!-- 模态框 --><div class="modal"><!-- 1. 半透明遮罩 --><div class="modal-bg" onclick="this.parentNode.style.display='none'"></div><!-- 2.弹层表单 --><!-- <form action="" class="modal-form"><fieledset style="display: grid; gap: 1em"><legend>用户登录</legend><input type="email" name="email" /><input type="password" name="password" placeholder="**********" /><button>登录</button></fieledset></form> --><form action="" class="modal-form"><fieldset style="display: grid; gap: 1em"><legend>用户登录</legend><input type="email" name="email" placeholder="user@email.com" /><input type="password" name="password" placeholder="不少于6位" /><button>登录</button></fieldset></form></div></body></html><style>* {margin: 0;padding: 0;box-sizing: border-box;}/* 顶部样式 */header {background-color: lightgreen;display: flex;padding: 0.5em 1em;}header.title {font-weight: lighter;font-style: italic;color: white;text-shadow: 1px 1px 1px #444;letter-spacing: 1px;}header button {margin-left: auto;width: 5em;border: none;border-radius: 0.5em;}header button:hover {cursor: pointer;background-color: coral;color: white;box-shadow: 0 0 8px #fff;transition: 0.3s;}/* 模态框表单 */.modal.modal-form fieldset {padding: 5px 1em;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;height: 100px;top: 0;left: 0;right: 0;bottom: 0;background-color: red;}/* 初始化时，将模态框弹出隐藏 */.modal {display: none;}</style>
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
收藏
