定位实战：模态框

<!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>
更多相关文章

随机推荐
