【小案例】 DOM实现弹出登录框后的半透明遮盖效果

最新推荐文章于 2023-03-29 11:07:35 发布

倏存

最新推荐文章于 2023-03-29 11:07:35 发布

阅读量424

点赞数

分类专栏：前端基础文章标签： web dom操作

本文链接：https://blog.csdn.net/weixin_47640160/article/details/119387540

版权

前言

浏览器提供的一套操作浏览器功能和页面元素的API(BOM和 DOM)。文档对象模型（DocumentObject Model，简称
DOM），是 W3C组织推荐的处理可扩展标记语言的标准编程接口。它是一种与平台和语言无关的应用程序接口(API),它可以动态地访问程序和脚本，更新其内容、结构和www文档的风格
(目前，HTML和XML文档是通过说明部分定义的)。文档可以进一步被处理，处理的结果可以加入到当前的页面。 DOM是一种基于树的API文档，它要求在处理过程中整个文档都表示在存储器中。

简单来说：
DOM可以把HTML看做是文档树，通过DOM提供的API可以对树上的节点进行操作。

DOM事件

DOM事件，触发–响应机制。
绑定事件(注册事件)三要素

事件源：给谁绑定事件
事件类型：绑定什么类型的事件（click 单击）
事件函数：事件发生后执行什么内容，写在函数内部

常用的鼠标事件类型

onclick 鼠标左键单击触发
ondbclick 鼠标左键双击触发
onmousedown 鼠标按键按下触发
onmouseup 鼠标按键放开时触发
onmousemove 鼠标在元素上移动触发
onmouseover 鼠标移动到元素上触发
onmouseout 鼠标移出元素边界触发

本篇目标

当然，如下常见应用的图片显示内容的具体功能的实现，还有很多内容。
本篇文章聚焦于：用DOM中的事件操作，实现半透明遮盖效果的出现与消失。
这个半透明遮盖效果，使得用户除了登录框之外无法点击其它页面上的元素。
点击登录按钮时半透明遮盖效果出现，全界面只有登录框可以操作；
点击关闭×时，恢复。
而结构部分和样式部分代码，不做解释。

常见应用，如下：

在这里插入图片描述

代码如下

<!DOCTYPE html>
<html>

<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        .login-header {
     
            width: 100%;
            text-align: center;
            height: 30px;
            font-size: 24px;
            line-height: 30px;
        }

        ul,
        li,
        ol,
        dl,
        dt,
        dd,
        div,
        p,
        span,
        h1,
        h2,
        h3,
        h4,
        h5,
        h6,
        a {
     
            padding: 0px;
            margin: 0px;
        }

        .login {
     
            width: 512px;
            position: absolute;
            border: #ebebeb solid 1px;
            height: 280px;
            left: 50%;
            right: 50%;
            background: #ffffff;
            box-shadow: 0px 0px 20px #ddd;
            z-index: 9999;
            margin-left: -256px;
            margin-top: 140px;
            display: none;
        }