制作dijit.Dialog透明时,它显示了(Making dijit.Dialog Transpa

2019-10-16 18:20发布

我有一个Dojo Dialog box使用dijit.Dialog库。 它显示了在Rowclick一个事件Dojo grid 。 现在,当它显示了我希望它是透明或减少其不透明度,这样无论是在我的背景,我可以看到它,它会很好看。 我的对话框是一个简单<div> with data-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>

Dialog box id= terms显示了这个代码::

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);
      });

现在我想的是,当此dialog box(terms)弹出它是透明的。 我曾尝试一个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> 

我使用IE8。

这个怎么做 ? 谢谢 ..

功能showDialog()编辑::

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';
            }

Answer 1:

编程方式

    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>


Answer 2:

dijit的对话框css样式文件有:.dijitDialogUnderlay更改“backgounrd色”属性为:背景色:#0000;



文章来源: Making dijit.Dialog Transparent when it shows up
标签: html css dojo