CSS 模态窗口点击遮罩关闭：实现步骤和代码示例

这种效果可以通过使用 CSS3 的伪元素 'before' 和 'after' 来实现。

具体实现步骤如下：

1. 在 HTML 中添加一个包裹弹出窗口的 div，并给它一个 class 名，如 'modal-container'。

2. 使用 CSS 设置这个 div 的宽高、背景色、位置等样式，并设置它的 z-index 属性值比其他元素都高，这样它就能覆盖在其他元素之上。

3. 使用 'before' 和 'after' 伪元素创建两个透明的层，分别放在弹出窗口的上方和下方。这两个层的宽高和位置应该和弹出窗口一样，并且需要设置 z-index 属性值比弹出窗口小。

4. 给这两个伪元素添加事件监听器，当用户点击它们时，关闭弹出窗口。

这样就可以实现点击弹出窗口以外的区域时，弹出窗口不会关闭，只有在点击两个透明层时才会关闭。