收藏
天蓬老师批改状态：合格
老师批语：弹层的表单 很不错
- 简述定位的类型与应用场景和使用条件
- 模仿课堂案例，实现一个模态框
四种定位类型和属性
position:static 静态定位，默认属性，与文档流源码顺序一致position:relative 相对定位，相对于文档流原始位置的偏移position:absolute 绝对定位，相对祖先最近定位元素原始位置的偏移，若没有祖先定位元素，则相对于根 html 的偏移，绝对定位元素会脱离文档流position:fixed 固定定位，绝对定位的一个特例，是相对于根 html 的偏移元素中有
position:relative和position:absolute就是一个定位元素转为定位元素
position:relative，它内部的元素就相对于它进行绝对定位固定定位
position:absolute可应用于 在线客服，广告位等
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>模仿课堂案例，实现一个模态框</title><link rel="stylesheet" href="css/modal.css"></head><body><header><h2>我的博客</h2><button>登录</button></header><div class="modal"><div class="modal-drop"></div><div class="modal-body"><button class="close">关闭</button><fieldset><legend>登录框</legend><form action="" method="post"><p><label for="user-name">用户名</label><input type="text" name="username" id="user-name"></p><p><label for="user-pass">密码</label><input type="password" name="userpass" id="user-pass"></p><p><button>登录</button></p></form></fieldset></div></div><!-- 模态框js --><script src="js/modal.js"></script></body></html>
* {margin: 0;padding: 0;box-sizing: border-box;}/* 页眉 */header {background-color: #ccc;padding: 0.5em 1em;/* BFC 清除浮动 */overflow: hidden;}header h2 {/* 左浮动 */float: left;}header button {/* 右浮动 */float: right;width: 5em;height: 2.5em;}header button:hover{cursor: pointer;}/* 模态框初始化隐藏 */.modal {display: none;}/* 遮罩层 */.modal .modal-drop {position: fixed;background-color: rgb(0, 0, 0, .5);top: 0;left: 0;right: 0;bottom: 0;}.modal .modal-body{position: fixed;background-color: #fff;padding: 1em;overflow: hidden;max-width: 20em;max-height: 13em;/* 水平垂直自动居中 */top: 0;left: 0;right: 0;bottom: 0;margin: auto;}/* 关闭按钮 */.modal .modal-body .close{position: absolute;top: 1.1em;right: 1.5em;width: 3em;height: 1.5em;}.modal .modal-body fieldset{padding:1em;}.modal .modal-body fieldset p{padding: .5em 0;}.modal .modal-body fieldset p label{display: inline-block;min-width: 3.5em;}.modal .modal-body fieldset p button{width: 3.5em;height: 2em;}
const btn = document.querySelector('header button');const modal = document.querySelector('.modal');const close = document.querySelector('.close');btn.addEventListener('click', setModal, false);close.addEventListener('click', setModal, false);function setModal(ev) {ev.preventDefault();let status = window.getComputedStyle(modal, null).getPropertyValue('display');modal.style.display = status === 'none' ? 'block' : 'none';}
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
