CSS 和 JS - 单击背景时删除模式

Question

目前我正在为我的系统制作自己的模式。当您单击包的名称时，会弹出并显示模式。我添加了一些 JQuery，当单击背景时应该删除模式。它确实做到了这一点，但当我单击模式本身时它也会隐藏。

我尝试将 z-index 3 添加到父级，将 z-index 4 添加到模态，但这不起作用。我怎样才能做到这样，如果单击背景，模式会消失，但当单击模式本身时，它不会执行任何操作，并且人们可以与模式正常交互？

我有一个小插图

https://i.stack.imgur.com/mFEn1.gif

超文本标记语言

萨斯

.package-popup

    position: fixed

    top: 0

    left: 0

    height: 100%

    width: 100%

    display: none

    overflow: hidden

    background-color: $primary_background_transparent

    z-index: 3

    .package-popup-dialog

        max-width: 960px

        position: relative

        margin: auto

        top: 100px

        background-color: $color-white

        border-radius: 16px

        padding: 3rem

        z-index: 4

        pointer-events: none

        .package-popup-content

            position: relative

            pointer-events: auto

            display: flex

            flex-direction: column

Answer 1

只需检查点击事件目标：$(item).on('click', function(event) {  if (event.target.classList.contains("shadow")) {    // Close dialog  }}从 css 中删除pointer-events: none以使其正常工作