[popup]Two nested popups dismissed by only one outside click

[ziyunfei]

I don't know if this is a spec bug or implementation bug?

<button popuptoggletarget="popup1">按钮1</button>

<div id="popup1" class="popup" popup>
  弹窗1
  <button popuptoggletarget="popup2">按钮2</button>
</div>

<div id="popup2" class="popup" popup>
  弹窗2
</div>

<style>
.popup {
    width: 100px;
    height: 100px;
    display: grid;
    place-content: center;
    position: absolute;
    left: 0;
    top: 100px;
}

[popup] {
    opacity: 0;
    transition: opacity 0.2s;
}

[popup]:top-layer {
    opacity: 1;
}

[popup]::backdrop {
    background: #000a
}
</style>

[ziyunfei]

The reason is ::backdrop has pointer-events: none

[mfreed7]

Thanks for raising the issue. So this is by design, and this is working as intended. Whether you have one open pop-up or several stacked ones (as in your example), clicking outside all of them will light-dismiss them all. If, in your example, you were to offset the nested pop-up a bit, so you could still see the bottom pop-up, you would be able to click on that bottom pop-up and it would stay open. I.e. that click would be outside the nested pop-up, so it would close, but it would be within the bottom pop-up, so that would stay open.

Also note that you can hit ESC and only the topmost pop-up will close. ESC just pops the topmost one off the stack.

Let me know if this answers your question. You can read more about this behavior in this section of the explainer.

[mfreed7]

I'm going to close this, but feel free to re-open it if my comment above didn't address the issue.