点击overlay遮罩层内的content div也会关闭弹窗，该如何解决？

你遇到的问题本质是事件冒泡导致的：内部content元素的点击事件会向上冒泡到父级overlay元素，触发父级绑定的关闭逻辑。可以通过以下两种方案解决：

方案1：阻止content区域的点击事件冒泡 #

直接在content元素上绑定点击事件，阻止事件向上传递即可，修改后的HTML代码如下：

<button (click)="showPopup = !showPopup">Open popup</button>

<div class="overlay-bg" (click)="showPopup = !showPopup" [ngClass]="showPopup ? 'is-active' : ''">
 <div class="content" (click)="$event.stopPropagation()">Some content</div>
</div>

该方案改法最简单，content内部的所有交互操作都不会触发父级的关闭逻辑。

方案2：在overlay的关闭逻辑中增加事件源判断 #

如果不想给content加额外事件，可以直接修改overlay的点击逻辑，只有点击的元素是overlay本身的时候才触发关闭：

<div class="overlay-bg" (click)="$event.target === $event.currentTarget && (showPopup = !showPopup)" [ngClass]="showPopup ? 'is-active' : ''">
 <div class="content">Some content</div>
</div>

注意：你当前代码存在类名不匹配的问题，HTML中overlay的类名是overlay-bg，但CSS中写的是.overlay，需要统一类名否则样式不会生效。

内容的提问来源于stack exchange，提问作者Denver Dang