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以使其正常工作