如何让popup弹窗相对于整个页面定位而非触发它的图片元素

• 你当前的.showcompliant弹窗没有脱离父级Elementor小部件的flex布局文档流，设置的align-self: center、margin-left: 50%都是相对于小部件容器生效，所以只会对齐到触发图片所在的小部件区域，无法相对于整个页面居中
• 遮罩层.overlay没有设置全屏定位规则，无法辅助弹窗做全局居中
• 原有样式存在语法疏漏（比如.popup img的cursor: pointer后缺失分号），导致部分规则不生效

直接替换原有<style>标签内的所有样式即可，JS逻辑无需修改：

.popup{
    margin: auto;
    text-align: center;
}
.popup:hover {
    position: relative;
    top: -5px;  
}
.popup img{
    width: 390px;
    height: 140px;
    cursor: pointer;
    z-index: 75;
}
/* 弹窗容器改为固定定位，相对于浏览器视口全局居中 */
.showcompliant{
    display: none;
    z-index: 9999;
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    align-items: center;
    justify-content: center;
}
/* 遮罩层铺满全屏 */
.overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.5);
}
/* 弹窗内容区无需额外对齐规则，父级flex已实现居中 */
.showcompliant .img-showcompliant{
    width: 650px;
    max-width: 90vw; /* 兼容移动端，避免弹窗溢出屏幕 */
    height: 350px;
    background: #F2F2F2;
    padding: 20px;
    position: relative;
    z-index: 10;
}
/* 补充关闭按钮位置规则 */
.img-showcompliant span{
    position: absolute;
    top: 10px;
    right: 15px;
    cursor: pointer;
    font-size: 20px;
}
.description {
    padding: 25px;
    color: #1a1a1a;
}
.illustrationcomplaints {
    background-image: url("image2.png");
    background-repeat: no-repeat;
    width: 600px;
    height: 100px;
}

内容的提问来源于stack exchange，提问作者user15641284