How do I set the zIndex on a dijit.TooltipDialog?

问题

I've created a dijit.TooltipDialog and everything works as it should. However, if another dialog is produced from within the tooltip dialog it shows up behind the tooltip dialog instead of on top of it. I checked the zIndex on the 2 dialogs and the tooltip dialog is 1000 and the other dialog is 950.

I've tried setting the zIndex on the respective container node and the tooltip dialog's "domNode" both with no luck. So does anyone know how to set the zIndex on the tooltip dialog?

回答1:

as you will find if you inspect the dom after creating a programmatic tooltip - the tooltip is placed in an overlay container beneath <body>.

As mentioned, seek alternative methods for this.. But the answer is as follows; For you to successfully set a z-index you must find the correct node - which is not the domNode since the dialog has a 'layer' of its own via the dijit.popup design.

Here's the fiddle for it: http://jsfiddle.net/rQHSP/

In short, this is what you could do.

   myDialog.onShow = function() {
        node = this.domNode
        // loop upwards untill we hit a wall or nodes class mathes popup
        while (node 
           && (!node.className || !node.className.match("dijitTooltipDialogPopup")))
              node = node.parentNode

        console.log(dojo.style(node, "zIndex")
   }

回答2:

Following mschr's answer I couldn't find the underlayAttrs property of dijit.TooltipDialog. But that did lead me to finding _popupWrapper which is the wrapper node of the entire popup. This node had a zIndex of 1000. The below code corrected the issue:

var dij = dijit.byId(dojo.query("[id*='_TooltipDialog_']")[0].id);
dij.onShow = function() {
    dojo.style(dij._popupWrapper,"zIndex",900);
}

来源：https://stackoverflow.com/questions/10572820/how-do-i-set-the-zindex-on-a-dijit-tooltipdialog

标签

dojo

xpages

xpages-ssjs