Javascript CSS&；JS-单击背景时删除模式

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

我尝试将z-index 3添加到父级，将z-index 4添加到模态，但这不起作用。我如何使它，如果点击背景，模态消失，但当点击模态本身，它什么也不做，人们可以正常与模态交互

我有一个小例子

使用Ajax将弹出窗口附加到父级（见下文）

{{{{（'Packages'）}

$.ajax({
标题：{'X-CSRF-TOKEN'：$（'meta[name=“CSRF-TOKEN”]'）.attr（'content'），'X-Requested-With'：'XMLHttpRequest'}，
网址：'https://www.rainierlaansite.test/api/packages/get',
键入：“GET”，
数据：{}，
成功：功能（数据）{
$（“#包加载”）.fadeOut（）；
let wrapper=$（“#packages wrapper”）；
让popup_list=$（'.popup list'）；
let popup='popup id'；
如果（数据==null）{
console.log（'lol'）
}
$.each（数据、函数（索引、值）{
设el=数据[索引]；
包装器.append(
'' +
'' +
'' +
'' +
“
”+el.description+”
'+
'' +
'' +
'' +
'' +
“+”
”
);
popup_list.append(
'' +
'' +
'' +
'' +
'' +
'' +
'' +
'' +
'' +
'' +
'' +
'' +
'' +
'' +
''+el.name+''符号+
“
”+el.creator+”
'+
'' +
'' +
'' +
'' +
'' +
'' +
“\n”+
“\n”+
'' +
'' +
'' +
'' +
'' +
'' +
'' +
“诺根·贝奥德林根”+
'' +
''+
''+el.下载+
'' +
'' +
'' +
'' +
'' +
'' +
'' +
'' +
'' +
'' +
'' +
'' +
'' +
“”+el.description+”
”+
'' +
'' +
“这是特威特克斯特”+
'' +
'' +
“Dit是tekst 3”+
'' +
'' +
'' +
'' +
'' +
'' +
''
);
});
$（'.popup'）。在（'click'，函数（）{
if（$（此）.data（弹出窗口））{
让item=$（'.popup-'+$（this.data（popup））；
item.addClass（'show'）；
$（项）。在（'单击'，函数（）上）{
item.removeClass（“显示”）；
console.log（'ik klik op de achtergrond'）；
})
}
});
},
错误：函数（e）{
$（“#包错误”）.fadeIn（）.text（“不幸的是
$(item).on('click', function(event) {
  if (event.target.classList.contains("shadow")) {
    // Close dialog
  }
}