Making Dijit.dialog Transparent When It Shows Up

I have a Dojo Dialog box using dijit.Dialog library. It shows up on a Rowclick event of a Dojo grid. Now when it shows up I want it to be Transparent or reduce its opacity so that

Solution 1:

Programatically

var dia = new dijit.Dialog({
        title: "Click me!",
        onShow: function() {
            var me = this;
            // show routine sets opacity to 1, wait till it has and reset// second style call sets the underlay as wellsetTimeout(function() {
                dojo.style(me.domNode, "opacity", 0.4);
                dojo.style(dojo.byId(me.underlayAttrs.dialogId + me.underlayAttrs["class"]), "opacity", 0.4);
            }, 1000);
        },
        content: 'simple contents'
    });
    dia.startup();
    dia.show();

Via markup;

<divdata-dojo-type="dijit.Dialog"style="height:580px;width:900px;"data-dojo-props="title:'Control Activities'"preload="true"><scripttype="dojo/method"data-dojo-event="onShow"data-dojo-args="">var me = this;
            // show routine sets opacity to 1, wait till it has and reset// second style call sets the underlay as wellsetTimeout(function() {
                dojo.style(me.domNode, "opacity", 0.4);
                dojo.style(dojo.byId(me.underlayAttrs.dialogId + me.underlayAttrs["class"]), "opacity", 0.4);
            }, 1000);
   </script></div>

Solution 2:

dijit dialog css style file has: .dijitDialogUnderlay Change the "backgounrd-color" property as : background-color: #0000;