Html 使dijit.Dialog显示时透明

Html 使dijit.Dialog显示时透明,html,css,dojo,Html,Css,Dojo,我有一个使用dijit.Dialog的Dojo对话框。它显示在Dojo网格的行单击事件上。现在,当它出现的时候,我希望它是透明的,或者减少它的不透明度,这样无论我的背景是什么,我都可以看到它,它看起来会很好。我的对话框是一个简单的,带有数据dojo type=“dijit.Dialog” 代码是: <div id="terms" name ="hi" data-dojo-type="dijit.Dialog" style="height:580px;width:900px;" data-d

我有一个使用dijit.Dialog的
Dojo对话框
。它显示在Dojo网格的
行单击事件上。现在,当它出现的时候,我希望它是透明的,或者减少它的不透明度,这样无论我的背景是什么,我都可以看到它,它看起来会很好。我的对话框是一个简单的
,带有数据dojo type=“dijit.Dialog”

代码是:

<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>
现在我希望当弹出这个
对话框(术语)
时,它是透明的。我也尝试过一个CSS,但对我来说不起作用:

<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> 
程序化

    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();
通过标记

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

var me=这个;
//“显示例程”将不透明度设置为1,等待其恢复并重置
//第二个样式调用也会设置参考底图
setTimeout(函数(){
style(me.domNode,“不透明度”,0.4);
style(dojo.byId(me.underlayAttrs.dialogId+me.underlayAttrs[“类”]),“不透明度”,0.4);
}, 1000);

dijit对话框css样式文件具有:。dijit对话框参考底图
将“backgounrd color”属性更改为:背景色:#0000

非常感谢@mschr的回复。但我没有弄清楚这一点。虽然代码中没有错误。但我的对话框出现时,我得到一个简单的白色背景,没有透明度。已经在Chrome和IE8上试用过了。我已经编辑了上面的代码。看看我是否把它编辑对了。谢谢检查答案,您的编辑会稍微关闭,因为每次调用showDialog时它都会附加一个侦听器,因此最终会对dojo.style进行X次调用。相反,将onShow实现放在构建它的地方,我展示了它的标记变量以及编程方式1)打开开发者工具栏;2) 单击“检查元素”3)单击对话框左上角。3) 将元素悬停在层次结构中(通常与containerNode一样高),然后找到要设置背景的节点。。这个节点将有一个CSS类-转到您的样式表并设置该特定类的背景色。
    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();
<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>