在JavaScript中实现弹出层和锁屏操作是网页交互中常见的功能，这涉及到对DOM元素的操作、CSS样式的动态修改以及事件监听等技术。在这个示例中，我们将深入理解如何利用JS来创建一个弹出层，并同时实现锁屏效果。
弹出层的HTML结构包括一个主容器`.up`，它包含一个标题`h2`和一个关闭按钮`span`，还有一个用于打开弹出层的按钮`span`。此外，还定义了一个全屏覆盖的黑色半透明层`.mask`，用于实现锁屏效果。CSS样式定义了各个元素的布局和视觉样式，如边框、背景颜色、定位等。
接着，我们来看JavaScript部分。在JS中，首先定义了一个 `$` 函数，用于简化 `getElementById` 方法，便于之后的DOM操作。然后定义了一个 `myDiv` 函数，该函数通过计算屏幕高度和宽度来使弹出层居中显示。这里使用了两种方法，一种是CSS方式，另一种是通过JS动态计算。在页面加载完成后，调用 `myDiv` 函数初始化弹出层位置。
事件监听是弹出层和锁屏操作的核心。通过 `onclick` 事件，当用户点击“打开弹出层”按钮时，弹出层和遮罩层显示；当点击“关闭”按钮时，两者隐藏。为了实现全屏遮罩，创建了一个新的`div`元素，赋予其类名 `.mask`，并动态设置其宽高为浏览器的尺寸，然后将其插入到文档的 `body` 元素中。同时，设置了遮罩层的 `display` 属性为 `none`，在需要时将其改为 `block`，以达到锁屏效果。
此外，示例中的注释提到了用CSS实现div居中，这是通过设置 `position: absolute;`，然后使用负的 `margin` 来调整元素相对于其最近非 static 定位祖先元素的位置。CSS的 `top: 50%; left: 50%;` 将元素的左上角移动到其容器的中心，而负的 `margin` 值则将元素本身向相反方向移动一半的宽度和高度，使得元素整体居中。
总结来说，JS实现的添加弹出层并完成锁屏操作主要涉及以下知识点：
1. DOM操作：使用 `getElementById` 和自定义 `$` 函数来获取和操作DOM元素。
2. CSS样式动态修改：通过JavaScript修改元素的 `style` 属性，如 `display`, `top`, `left` 等，实现元素的显示和位置调整。
3. 事件监听：使用 `onclick` 事件监听用户的点击行为，并执行相应的回调函数。
4. 浏览器事件：`window.onload` 用于确保在页面完全加载后执行特定代码。
5. 页面元素居中：通过CSS或JavaScript计算并设置元素的居中位置。
6. 动态创建和插入元素：利用 `createElement` 和 `appendChild` 创建和插入新的DOM元素。
以上就是利用JavaScript实现弹出层和锁屏操作的详细解析，这一过程涵盖了前端开发中常见的技术，对于提升网页交互体验有着重要作用。
