Question

我在一个页面上有两个dijit对话框。一个是黑色覆盖，另一个是白色。 HTML是：

<div id="test" title="Colorful" dojoType="dijit.Dialog">
content
</div>

根据dijit的预期行为，它应该提供以下代码

<div dojoattachpoint="node" class="dijitDialogUnderlay _underlay" id="test_underlay"></div>

其中，通过使用ID test_underlay ，我们可以自定义叠加背景。但在我的情况下，我在运行时获得了代码。

<div id="dijit_DialogUnderlay_0" class="dijitDialogUnderlayWrapper" widgetid="dijit_DialogUnderlay_0" style="display: block; top: 0px; left: 0px; opacity: 1;"><div dojoattachpoint="node" class="dijitDialogUnderlay" style="width: 1424px; height: 466px;"></div></div>

知道为什么会这样吗？我的dojo版本是1.2

Answer 1

在css中设置dijitDialogUnderlay类的背景颜色。如果由于某种原因你在你的css之前加载了dojo css，你可以添加！important。

.dijitDialogUnderlay.white_underlay {
    background: none repeat scroll 0 0 #FFFFFF !important;
}

.dijitDialogUnderlay.black_underlay {
    background: none repeat scroll 0 0 #000000 !important;
}

在你的标记中：

<div id="test" title="Colorful" dojoType="dijit.Dialog" class="black">content</div>
<div id="test" title="Colorful" dojoType="dijit.Dialog" class="white">content</div>

Answer 2

试试这个：

<html>
    <head>

        <script type="text/javascript">
        var underlay = dijit._underlay;

        dojo.addOnLoad(function(){

                    if(!underlay){
                         underlay = dijit._underlay = new dijit.DialogUnderlay();
            }

            var whiteDialog = dijit.byId("test");
            var blackDialog = dijit.byId("test2");
            dojo.connect(btn1, "onClick", function(e){ whiteDialog.show(); });
            dojo.connect(btn2, "onClick", function(e){ blackDialog.show(); });
        });
    </script>

</head>
<body>

        <div jsId="btn1" dojoType="dijit.form.Button">Show white dialog</div>
        <div jsId="btn2" dojoType="dijit.form.Button">Show black dialog</div>
        <div id="test" title="White" dojoType="dijit.Dialog">
            content
            <script type="dojo/connect" event="onShow">
                dojo.style(underlay.domNode.firstChild, "backgroundColor", "white");
            </script>
        </div>
        <div id="test2" title="Black" dojoType="dijit.Dialog">
            content
            <script type="dojo/connect" event="onShow">
                dojo.style(underlay.domNode.firstChild, "backgroundColor", "black");
            </script>
        </div>
    </div>

</body>
</html>

DIJIT |如何更改叠加背景

2 个答案: