定位的类型-实现一个模态框

简述定位的类型与应用场景和使用条件
模仿课堂案例，实现一个模态框

1. 简述定位的类型与应用场景和使用条件

四种定位类型和属性

position:static 静态定位，默认属性，与文档流源码顺序一致
position:relative 相对定位，相对于文档流原始位置的偏移
position:absolute 绝对定位，相对祖先最近定位元素原始位置的偏移，若没有祖先定位元素，则相对于根 html 的偏移，绝对定位元素会脱离文档流
position:fixed 固定定位，绝对定位的一个特例，是相对于根 html 的偏移

元素中有 position:relative 和 position:absolute 就是一个定位元素

转为定位元素 position:relative，它内部的元素就相对于它进行绝对定位

固定定位 position:absolute 可应用于在线客服，广告位等

2. 模仿课堂案例，实现一个模态框

模仿模态框

<!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>

引入的 css/modal.css 为

* {
    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;
}

引入的外部 js/modal.js 为

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';
}

附图，点击登录弹出模态框

登录弹出模态框1

点击关闭按钮，关闭模态框

登录弹出模态框2

定位的类型-实现一个模态框

定位的类型-实现一个模态框

1. 简述定位的类型与应用场景和使用条件

2. 模仿课堂案例，实现一个模态框

相关文章