Making dijit.Dialog Transparent when it shows up


Tags: html,css,dojo

Problem :

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 Whatever was in my background i can see it and it will look good. My Dialog box is a simple <div> with data-dojo-type="dijit.Dialog".

The code is ::

<div id="terms" name ="hi" data-dojo-type="dijit.Dialog" style="height:580px;width:900px;" data-dojo-props="title:'Control Activities'" preload="true">
<center><p><strong>EDIT AN ACTIVITY </strong></p></center>
<center><table>
<tr style="height: 50px">
<td style="width: 150px" align="right"><b>ASSIGNED BY : &nbsp&nbsp&nbsp</b></td>
<td style="width: 600px" align="left"><div id="plets"><input dojoType="dijit.form.ValidationTextBox" id="dassignedbyid" name="dassignedbyname"  onfocus="hello()" required="true"></div>
<span dojoType="dijit.Tooltip" connectId="dassignedbyid">Enter Name</span></td>
<td style="width: 150px" align="right"><b>ASSIGNED TO : &nbsp&nbsp&nbsp</b></td>
<td style="width: 600px" align="left"><div id="plets1"><input dojoType="dijit.form.ValidationTextBox" id="dassignedtoid" name="dassignedtoname" onfocus="hello()" required="true"></div>
<span dojoType="dijit.Tooltip" connectId="dassignedtoid">Enter Name</span></td></tr>
</table></center>
</div>

And the Dialog box id= terms shows up on this code ::

dojo.connect(grid, "onRowClick", grid, function(){
        var items = grid.selection.getSelected();
        dojo.forEach(items, function(item){

            var v = grid.store.getValue(item, "ActID");
            getdetailsfordialog(v);
            function showDialog(){
                dojo.require('dijit.Tooltip');
                dijit.byId("terms").show();
                document.getElementById('closelabelspan').style.display = 'none';
                document.getElementById('holdlabelspan').style.display = 'none';
                document.getElementById('startlabelspan').style.display = 'none';
                document.getElementById('cancellabelspan').style.display = 'none';
                document.getElementById('updatelabelspan').style.display = 'none';
            }

            showDialog();
            }, grid);
      });

Now i want that when this dialog box(terms) pops up it is transparent. I have tried one CSS also but that ain't working for me ::

<style>
div.transbox
  {
  width:900px;
  height:580px;
  background-color:#FFFFFF;
  border:2px solid black;
  opacity:0.6;
  filter:alpha(opacity=60); /* For IE8 and earlier */

  }
</style> 

I am using IE8.

How to do this ? Thanks ..

Function showDialog() edited ::

function showDialog(){
                dojo.require('dijit.Tooltip');
                dijit.byId("terms").on("show", function() { dojo.style(this.domNode, "opacity", 0.3); });
                dijit.byId("terms").show();
                document.getElementById('closelabelspan').style.display = 'none';
                document.getElementById('holdlabelspan').style.display = 'none';
                document.getElementById('startlabelspan').style.display = 'none';
                document.getElementById('cancellabelspan').style.display = 'none';
                document.getElementById('updatelabelspan').style.display = 'none';
            }


Solution :

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 well
            setTimeout(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;

<div data-dojo-type="dijit.Dialog" style="height:580px;width:900px;" 
   data-dojo-props="title:'Control Activities'" preload="true">

   <script type="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 well
            setTimeout(function() {
                dojo.style(me.domNode, "opacity", 0.4);
                dojo.style(dojo.byId(me.underlayAttrs.dialogId + me.underlayAttrs["class"]), "opacity", 0.4);
            }, 1000);
   </script>
</div>

    CSS Howto..

    How to properly align something that resizes in a specific location

    How to reverse the text with js/css? [duplicate]

    How to create a CSS3 animation that resembles an image fill up effect?

    Hover on “everything but” aka “spotlight” effect: how to make smooth & easy hover transitions?

    How (and why) to use display: table-cell (CSS)

    How to set two background color to one element in CSS?

    css: how to display prev and next links outside slider

    How can I get placeholder text to shrink to fit within its text input element and show its entire value? [duplicate]

    How to stretch a header across a web page background with CSS

    How to switch “controlgroup” background color

    How to use css control to focus on div background when href link clicked

    Google chart - how to change a css property for the whole table

    How to go about making an image move up in the div on hover

    How to pull css properties along with html content in Ajax?

    How to load a new stylesheet when switching from JQuery Mobile site to PC site

    How can I target only visible objects with nth-child?

    How do I set two values for IE's `filter` property?

    CSS how to use pseudo-class :not with :nth-child

    How to get height of CSS manipulated image?

    How to align 2 divs inside one div container with CSS (see image)

    How to hide text without ID?

    How do I get this CSS to work in safari

    How to know if an element's width is absolute or relative?

    how to keep my slider horizontally centered?

    How do I install SASS with Mean.io?

    How to make smooth animation in css?

    How can i find and change css style in ruby?

    Vertical centering images within a slideshow using JS code?

    Learning CSS, how to use stylesheet with master page

    How to have a sidebar on the right in a responsive page with maximum width?