制作dijit.Dialog显示时透明 [英] Making dijit.Dialog Transparent when it shows up
本文介绍了制作dijit.Dialog显示时透明的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
使用 dijit.Dialog 库，我有一个 Dojo对话框。它显示在 Dojo网格的 Rowclick 事件中。现在，当它出现时，我希望它是透明的或减少其不透明度，以便无论在我的背景中，我都能看到它，并且它看起来不错。我的对话框是一个简单的< div>用data-dojo-type =dijit.Dialog。
代码是::
< div id =术语name =hidata-dojo-type =dijit.Dialogstyle =height：580px; width：900px; data-dojo-props =title：'Control Activities'preload =true>
< center>< p>< strong>编辑活动< / strong>< / p>< / center>
< center>< table>
< tr style =height：50px>
< td style =width：150pxalign =right>< b> ASSIGNED BY：& nbsp& nbsp& nbsp< / b>< / td>
< td style =width：600pxalign =left>< div id =plets>< input dojoType =dijit.form.ValidationTextBoxid =dassignedbyidname = dassignedbynameonfocus =hello（）required =true>< / div>
< span dojoType =dijit.TooltipconnectId =dassignedbyid>输入名称< / span>< / td>
< td style =width：150pxalign =right>< b>分配至：& nbsp& nbsp& nbsp< / b>< / td>
< td style =width：600pxalign =left>< div id =plets1>< input dojoType =dijit.form.ValidationTextBoxid =dassignedtoidname = dassignedtonameonfocus =hello（）required =true>< / div>
< span dojoType =dijit.TooltipconnectId =dassignedtoid>输入名称< / span>< / td>< / tr>
< / table>< / center>
< / div>
以及对话框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（）;
}，网格）;
}）;
现在我希望当对话框（条款）弹出它是透明的。我也尝试了一个CSS，但这不适合我::
< style>
div.transbox
{
width：900px;
height：580px;
背景颜色：#FFFFFF;
border：2px纯黑色;
不透明度：0.6;
filter：alpha（opacity = 60）; / *对于IE8及更早版本* /
}
< / style>
我正在使用IE8。
去做这个 ？谢谢..
$ b
函数 showDialog（）:
function showDialog（）{
dojo.require（'dijit.Tooltip'）; $（）。）（）;}（）;
dijit.byId（terms）。
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';
解决方案
以编程方式
var dia = new dijit.Dialog（{
title：Click me！，
onShow：function（）{
var me = this;
// show routine将opacity设置为1，等到它有和重置
//第二个样式调用设置底层以及
setTimeout（function（ ）{
dojo.style（me.domNode，opacity，0.4）;
dojo.style（dojo.byId（me.underlayAttrs.dialogId + me.underlayAttrs [class]）， opacity，0.4）;
}，1000）;
}，
content：'简单内容'
}）;
dia.startup（）;
dia.show（）;
通过标记;
< div data-dojo-type =dijit.Dialogstyle =height：580px; width：900px;
data-dojo-props =title：'控制活动'preload =true>
< script type =dojo / methoddata-dojo-event =onShowdata-dojo-args =>
var me = this;
//显示例程将opacity设置为1，等到它有和重置
//第二个样式调用设置底层以及
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>
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 :    </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 :    </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';
}
解决方案
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>
这篇关于制作dijit.Dialog显示时透明的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
