如何让JavaScript的waitingbox弹窗始终保持置顶？

AI 小北

2026-8-14

如何让自定义JavaScript等待弹窗始终保持在最上层？

你当前的waitingbox代码尝试通过自定义topmost属性实现弹窗置顶，但这个属性并非DOM元素的原生属性，浏览器不会识别处理，因此无法生效。要实现弹窗始终在最上层，需要利用CSS的z-index属性结合元素定位规则来处理，具体方案如下：

核心原理

z-index仅对设置了position: absolute/fixed/relative/sticky的定位元素生效，用于控制元素的堆叠顺序，值越大的元素显示层级越高。

修改步骤

确保弹窗及遮罩层为定位元素
先给遮罩层（obol）和弹窗容器（obbx）添加定位属性，推荐使用fixed（相对于视口固定，适配弹窗场景）：
```
/* 对应obol的样式类 */
.mask {
  position: fixed;
}
/* 对应obbx的样式类 */
.waiting-box {
  position: fixed;
}
```

设置足够高的z-index值
在waitingbox.show方法中，为遮罩层和弹窗设置比页面其他元素更高的z-index值，确保层级领先：

waitingbox.show = function(divid,width,height){
    if (this.created){
        this.divid = divid;
        this.width=width;
        this.height=height;
        this.visible=true;
        
        var obbxd=this.obbxd; var obol=this.obol; var obbx =this.obbx;
        obbxd.innerHTML = $(divid).innerHTML;
        
        obol.style.height=pageHeight()+'px';
        obol.style.width=pageWidth()+'px';
        obol.style.top=posTop()+'px';
        obol.style.left=posLeft()+'px';
        obol.style.display='block';
        // 给遮罩层设置z-index
        obol.style.zIndex = '999';
        
        this.center(); 
        this.togglePageElements(false);
        
        obbx.style.display='block';
        // 弹窗z-index需高于遮罩层
        obbx.style.zIndex = '1000';
        
        document.onkeydown=kd;
    }
}