在 Dojo 中单击链接时打开弹出窗口或工具提示答案

【问题标题】：Open a Popup or tooltip onclick of link in Dojo在 Dojo 中单击链接时打开弹出窗口或工具提示
【发布时间】：2014-07-18 14:48:16
【问题描述】：

我在网络上到处都在关注教程来解决这个问题，因为我是 dojo 的新手，我知道 jquery，但 Dojo，没办法

我正在关注 stackoverflow 本身的链接，但无法找出代码：

http://stackoverflow.com/questions/18476084/dojo-and-javascript-lightweight-tooltip-in-onclick-on-anchor-tab

我试着写了一些代码，但它说的是

showDialog 未定义..

另外，要求是：

单击链接可打开链接后的对话框或工具提示，位于链接附近。
在关闭它的弹出窗口或工具提示内有一个链接，因此它实际上应该关闭提示或弹出窗口，

这是我到目前为止的尝试：

<script src="http://ajax.googleapis.com/ajax/libs/dojo/1.6/dojo/dojo.js"></script>
<script>
dojo.require("dijit.Dialog");
        dojo.addOnLoad(showDialog);
        elliotDialog = new dijit.Dialog({
          title: "My Dialog",
          content: "test content",
          style: "width: 450px"
        });
        showDialog = function(){
            // set the content of the dialog:
            elliotDialog.set("title");
            elliotDialog.set("content");
            elliotDialog.show();
        };
</script>   

<a href="javascript:void(0);" onclick="showDialog();" class="moreLink">More pricing...</a></p>
        <div dojoType="dijit.Dialog" id="elliotDialog" title="More Pricing Option">

        </div>

【问题讨论】：

标签： javascript dojo

【解决方案1】：

你的代码有几个错误：

您同时声明了一个声明式样式的小部件和一个以编程方式创建的具有相同名称的小部件。删除代码的以下部分：

<div dojoType="dijit.Dialog" id="elliotDialog" title="More Pricing Option">

</div>

你用错了dojo.addOnLoad()。当您想要等待模块和 DOM 加载时，应该调用 dojo.addOnLoad() 函数。没有理由在这里调用 showDialog() 函数。
更糟糕的是，在您调用它的那一刻，showDialog() 函数甚至不存在，因为您稍后在代码中声明了它。这就是您收到错误的原因：

Uncaught ReferenceError: showDialog is not defined

应该发生的是，您将对话框创建代码和依赖它的所有内容包装在 dojo.addOnLoad() 函数中，例如：

dojo.addOnLoad(function() {
    elliotDialog = new dijit.Dialog({
        title: "My Dialog",
        content: "test content",
        style: "width: 450px"
    });
    showDialog = function(){
        // set the content of the dialog:
        console.log(elliotDialog);
        elliotDialog.set("title");
        elliotDialog.set("content");
        elliotDialog.show();
    };
});

您错误地使用了对话框的设置器。在使用dijit/Dialog::set()函数时，你应该提供两个参数，一个是定义你想要设置的属性，第二个是你想要使用的值，这里就是你想要显示的标题和内容。

例如：

elliotDialog.set("title", "My title");
elliotDialog.set("content", "My content");

如果你做了所有这些，你的代码应该可以正常工作，你可以在下面的小提琴中看到：http://jsfiddle.net/4jnHk/

【讨论】：