Javascript 关闭子模式，同时仅在单击“关闭”按钮时保持父模式打开

因此，我遇到了一些问题，我不知道如何关闭儿童模式和保持家长模式打开，所以我想请社区看看我是否可以得到一些帮助

下面是我想做的：

• 我打开并单击“启动父模式”，我希望父模式显示出来（这非常有效）
• 当我从父模式内部启动子模式时，我看到了子模式（这非常有效）
• 我希望能够单击子模式中的关闭按钮并返回到父模式，因为它仍然处于活动状态，否则如果他们单击阴影区域中的任何位置，它将关闭所有模式，就像它当前所做的那样

总而言之，我只希望子模式关闭，这样我就可以看到父模式，只要单击关闭按钮

document.addEventListener（'DOMContentLoaded'，function（）{
const rootEl=document.documentElement；
const$modals=document.querySelectorAll（'.modal'）；
const$modalButtons=document.querySelectorAll（'.modal button'）；
const$modalCloses=document.queryselectoral（'.modal background、.modal close、.modal card head.delete、.modal card foot.button'）；
如果（$modalButtons.length>0）{
$modalButtons.forEach（函数（$el）{
$el.addEventListener（'click'，函数（）{
var target=$el.dataset.target；
openModal（目标）；
});
});
}
如果（$modalCloses.length>0）{
$modalCloses.forEach（函数（$el）{
$el.addEventListener（'click'，函数（）{
closeModals（）；
});
});
}
函数OpenModel（目标）{
var$target=document.getElementById（目标）；
root.classList.add（'is-clipped'）；
$target.classList.add（'is-active'）；
}
函数closeModals（）{
rootEl.classList.remove（'is-clipped'）；
$modals.forEach（函数（$el）{
$el.classList.remove（'is-active'）；
});
}
document.addEventListener（'keydown'，函数（事件）{
var e=事件| | window.event；
如果（例如keyCode===27）{
closeModals（）；
关闭下拉列表（）；
}
})
});

启动父模式
模态标题

这是父模式（向下滚动并单击子模式按钮）。

启动子模式
保存更改
取消
模态标题

这是儿童模态

保存更改
取消
我认为您应该为成功绑定不同的事件并取消Button，因为它们具有不同的逻辑


document.addEventListener（'DOMContentLoaded'，function（）{
const rootEl=document.documentElement；
const$modals=document.querySelectorAll（'.modal'）；
const$modalButtons=document.querySelectorAll（'.modal button'）；
const$modalCloses=document.querySelectorAll（'.modal background、.modal close、.modal card head.delete'）；
如果（$modalButtons.length>0）{
$modalButtons.forEach（函数（$el）{
$el.addEventListener（'click'，函数（）{
var target=$el.dataset.target；
openModal（目标）；
});
});
}
如果（$modalCloses.length>0）{
$modalCloses.forEach（函数（$el）{
$el.addEventListener（'click'，函数（）{
closeModals（）；
});
});
}
函数OpenModel（目标）{
var$target=document.getElementById（目标）；
root.classList.add（'is-clipped'）；
$target.classList.add（'is-active'）；
}
函数closeModals（）{
rootEl.classList.remove（'is-clipped'）；
$modals.forEach（函数（$el）{
$el.classList.remove（'is-active'）；
});
}
$modals.forEach（函数（$el）{
$el.addEventListener（'click'，函数（事件）{
if（event.target.classList.contains（'cancel'））{
$el.classList.remove（'is-active'）；
}
})
});
document.addEventListener（'keydown'，函数（事件）{
var e=事件| | window.event；
如果（例如keyCode===27）{
closeModals（）；
关闭下拉列表（）；
}
})
});

启动父模式
模态标题

这是父模式（向下滚动并单击子模式按钮）。

启动子模式
保存更改
取消
模态标题

这是儿童模态

保存更改
取消