xPages Bootstrap Dojo 进度条显示在模态背景后面

Question

我正在开发 Notes 10。我有一个 csjs 函数，当一个事件的完整更新运行时，它会调用一个 dojo 进度条。

当我使用默认主题时，它工作得很好。但是，当我将主题更改为 Bootstrap3 时，进度条仍然显示，但它显示在引导模式背景的后面。我已尝试将 .modal-backdrop 的样式更改为 display:none 或 background-color: transparent 但什么也没拿。

代码如下

Xpage

<?xml version="1.0" encoding="UTF-8"?>
<xp:view xmlns:xp="http://www.ibm.com/xsp/core">
    <xp:this.resources>
        <xp:script src="/xProgress.js" clientSide="true"></xp:script>
        <xp:dojoModule name="dijit.Dialog"></xp:dojoModule>
        <xp:dojoModule name="dijit.ProgressBar"></xp:dojoModule>
    </xp:this.resources>
    <xp:button value="Test Progress Bar" id="button1">
        <xp:eventHandler event="onclick" submit="true"
            refreshMode="complete" onComplete="progressDlg.hide();">
            <xp:this.action><![CDATA[#{javascript:for(i = 0; i < 100; i++)
{
    print("TEST");
}}]]></xp:this.action>
<xp:this.script><![CDATA[  var progressBar = new dijit.ProgressBar({indeterminate:true, layoutAlign: "left"});

progressDlg = new dijit.Dialog( {
    title:"Please wait... "+"\n" +"Fetching Information.", 
    content: progressBar,
     style: "width: 300px",
     closable: false            //Take this out to show close button
     });
progressDlg.show();]]></xp:this.script>
        </xp:eventHandler></xp:button>

</xp:view>

xProgress.js

dojo.require("dijit.ProgressBar");

var xProgress= {
    updateInterval : 750,       //update interval in ms
        
    progressXAgentPath : window.location.href.substring(0, window.location.href.indexOf(".nsf")+4) + "/getProgress.xsp",
    
    timerId : null,
    targetNode : null,
    targetNodeId : null,
    progressBar : null,
    
    start : function() {
        this.targetNode = dojo.byId(this.targetNodeId);
        
        if (this.targetNode==0) {
            alert("Invalid target node specified for xProgress progress bar");
        }
        //setup the dijit progressbar
        if (this.progressBar == null) {
            this.progressBar = new dijit.ProgressBar({id: "myProgressBar",  maximum: 100}, this.targetNode);
        } else {
            this.progressBar.update({
                maximum: 100,
                progress: 0
            });
        }
            
        this.timerId = setInterval( dojo.hitch(xProgress, "update"), this.updateInterval);
    },
    
    stop : function() {
        if (this.timerId != null) {
            clearInterval(this.timerId);
            this.timerId = null;
        }
            
        this.progressBar.update({
            progress: 100
        }); 
    },
    
    update : function() {
        dojo.xhrGet({
            url: this.progressXAgentPath,
            handleAs: "json",
            load: dojo.hitch(xProgress, "dataLoadSuccess"),
            error: dojo.hitch(xProgress, "dataLoadError")
        });
    },
    
    dataLoadSuccess : function(data) {
        this.progressBar.update({
            progress: data.progress
        });     
    },
    
    dataLoadError : function(error) {
        this.targetNode.innerHTML = "An unexpected error occurred: " + error;
    }
}

function updateProgress(to) {
    progressPercentage = to;
    sessionScope.put("progress", to);
}

Answer 1

尝试改变progressDlg的z-index：

progressDlg = new dijit.Dialog( {
    title:"Please wait... "+"\n" +"Fetching Information.", 
    content: progressBar,
     style: "width: 300px, z-index: 20000",
     closable: false            //Take this out to show close button
     });

更新：

dijit.Dialog 将 z-index 设置为 950，因此按照上述建议在 dijit.Dialog 样式中设置 z-index 不起作用。

尝试为 dijitProgressBar 添加 CSS：

.dijitProgressBar {
    z-index: 2000;
}