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

agxfikkp  于 2022-12-08  发布在  Dojo
关注(0)|答案(1)|浏览(195)

我正在开发Notes 10。我有一个csjs函数,当对一个事件进行完全更新时,它会调用一个dojo进度条。
当我使用默认主题时,它运行得很好。但是,当我将主题更改为Bootstrap 3时,进度条仍然显示,但它显示在bootstrap模式背景后面。我尝试将. modal-background的样式更改为显示:none或background-color:透明的但什么也没发生。
下方代码
X页

<?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);
}
blmhpbnm

blmhpbnm1#

尝试更改progressDlg的z索引:

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;
}

相关问题