Dojo Dijit Dialog relative position. is it possible?

Question

I want to position Dojo's Dijit Dialog relative to one of my html element. is it Possible? If yes. How?

currently it always shows dialog in middle of viewport.

Can any one help me regarding the matter?

Thanks.

amar4kintu

Answer 1

Another way that I do this (not great because I override a private method but it gives me the flexibility I want):

var d = new Dialog({
    title:"Your Dialog",
    _position:function(){
        if(this.refNode){
            p = Geo.position(this.refNode);
            Style.set(this.domNode,{left:p.x + "px", top:p.y + "px"});
        }
    },

    showAround:function(node){
        this.refNode = node;
        this.show();
    }
});
d.showAround(dojo.byId("someNode"));

This example uses "dojo/dom-style" as Style and "dojo/dom-geometry" as Geo.

Answer 2

I did that by adjusting default absolute position of dijit.dialog using dojo..

I used following code to readjust absolute position of dialog to what I want..

dijit.byId('dialog').show();

dojo.style('dialog','background-color','#AAAAAA');

var co = dojo.coords('period'); // element below which I want to display dialog

dojo.style('md1','top',(co.y + 25)+'px');
dojo.style('md1','left', co.x+'px');

Hopefully this will help someone..

Thanks.

amar4kintu

Answer 3

I think dijit.TooltipDialog is what you need.

Answer 4

    var dialog = new dijit.Dialog({
        title: myTitle,
        content: myDialogContent,
        style: "width: 300px;",
        onShow: function() { dojo.style(this.containerNode.parentNode,'visibility','hidden'); },
        onLoad: function() { dojo.style(this.containerNode.parentNode,{top:'100px', visibility:'visible'}); }

    });

Instead top:'100px' you can use also top:'20%' but not tested well. My dojo is 1.7.1.