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

问题描述

我正在研究 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);
}

解决方法

尝试改变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;
}