Css 向DOJO对话框添加内容_Css_Dojo_Dialog

Css 向DOJO对话框添加内容

css dojo

Css 向DOJO对话框添加内容,css,dojo,dialog,Css,Dojo,Dialog,为opensocial编写应用程序时会出现以下问题：我创建了一个对话框（css是tundra） myDialog=新建dijit.Dialog（{ 标题：“我的对话”，内容：“测试内容”，样式：“宽度：300px” }); 我怎样才能更改文件的“溢出”和/或“高度”属性 “dijitDialogPaneContent” 创建此对象后是否包含在myDialog中多谢各位 Subin根据解决方案的通用性，您可以使用几种方法应用于所有对话框如果要对所有对话框应用相同的样式，可以“扩展”主

为opensocial编写应用程序时会出现以下问题：

我创建了一个对话框（css是tundra）

myDialog=新建dijit.Dialog（{ 标题：“我的对话”，内容：“测试内容”，样式：“宽度：300px” });

我怎样才能更改文件的“溢出”和/或“高度”属性

“dijitDialogPaneContent”

创建此对象后是否包含在myDialog中

多谢各位

Subin

根据解决方案的通用性，您可以使用几种方法

应用于所有对话框如果要对所有对话框应用相同的样式，可以“扩展”主题，例如，通常使用苔原主题，如下所示：

require([ "dojo/query", "dojo/NodeList-dom" ], function(query) {
    // Your code
    query(".dijitDialogPaneContent", myDialog.domNode).style("overflow", "hidden");
});

如果要将其应用于所有对话框，可以执行以下操作：

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href="location/to/tundra.css" />
        <link rel="stylesheet" href="custom/style.css" />
    </head>
    <body class="tundra custom">
        <!-- Your content comes here -->
    </body>
</html>

这将保证它将覆盖所有对话框的常规苔原样式。如果不使用像

.custom

这样的类，则无法覆盖Tundra样式表，因为

.Tundra.dijitDialogPaneContent

将更具体（这意味着它具有更高的优先级）

当然，您也可以在自定义样式表中编写

.tundra.dijitDialogPaneContent

通过样式表应用于单个对话框如果要将其应用于单个对话框，请为该对话框指定一个ID，例如：

myDialog = new dijit.Dialog({
    title: "My Dialog",
    content: "test content",
    style: "width: 300px",
    id: "myDialogId"
});

然后您可以编写如下样式表：

require([ "dojo/query", "dojo/NodeList-dom" ], function(query) {
    // Your code
    query(".dijitDialogPaneContent", myDialog.domNode).style("overflow", "hidden");
});

#myDialogId.dijitDialogPaneContent{
溢出：隐藏；/**自定义样式*/
}

应用于单个对话框（使用JavaScript）分离样式表可以提高可读性，因为您可以将逻辑与设计分离。如果不需要单独的样式表，可以执行以下操作：

require([ "dojo/query", "dojo/NodeList-dom" ], function(query) {
    // Your code
    query(".dijitDialogPaneContent", myDialog.domNode).style("overflow", "hidden");
});

这将使用对话框的属性查询内容窗格，然后应用样式

应用于多个对话框

如果要将相同样式应用于多个对话框（但不是所有对话框），那么最好的方法是通过扩展默认对话框来创建自定义对话框。考虑到我的回答长度，我不打算详细解释，但我建议您阅读相关指南。

谢谢@Dimitri m的快速回复。然而，我的问题是我有一个特定于DOjo的“DOjo.html”，比如这个函数openDIV（id，dialogID）{var htmlContent=$（id）.innerHTML；top.DOjo.require（“dijit.Dialog”）；if（modal！=null）{modal.destroy（）；modal=null；}modal=new top.dijit.Dialog（{id:dialogID，autofocus:false，content:htmlContent}）；modal.show（）；}同样的css是.nihilo.dijitDialog.dijitDialogPaneContent{background:#ffffffff；border:none；border top:1px solid#d3d3；/*w/除此之外，顶行上的一个字符会导致.content和.label*之间出现间隙/padding:10px；overflow-x:hidden！重要；overflow-y:auto！重要；宽度：520px；}我想从我的DIV中删除底部的滚动条，我正在使用overflow-x:hidden；和overflow-y:scroll。当我执行F12和更改时，更改工作正常，但css更改没有反映在code@subin你能把这个添加到你的问题中吗？使用评论部分阅读起来真的很难：）你能解释一下你在说什么吗ean与“当我执行F12和更改时工作良好，但css更改没有反映在代码中”。