Question

感谢Frank对原帖creating a dialog box on link click, javascript的回答，我得到了示例代码，可以通过按钮启动对话框。现在我想从链接点击启动一个对话框。我试图在链接点击上运行的代码中添加一个函数，但它只是启动一个带有服务器错误的空白页面。有什么问题？

<!DOCTYPE html>
<html >
<head>

    <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/dojo/1.9.2/dijit/themes/tundra/tundra.css"/>

    <script>dojoConfig = {parseOnLoad: true}</script>
    <script src="//ajax.googleapis.com/ajax/libs/dojo/1.10.1/dojo/dojo.js"></script>

    <script type="text/javascript"> 

require(["dijit/Dialog", "dojo/domReady!"], function(Dialog){

var myDialog2;

     myDialog = new Dialog({
        id: "MyDialog",
        title: "Adjust Transparency",
        content: "Test content.",
        style: "width: 300px"
    });


function showDialog() {
        myDialog2 = new Dialog({
        id: "MyDialog2",
        title: "Adjust Transparency",
        content: "Test content.",
        style: "width: 300px"
    });
    myDialog2.show();

}

});

    </script>
</head>
<body class="tundra">
    <button onclick="myDialog.show();">show</button>
    <a href="javascript:void();"onclick="showDialog();">show</a>
</body>
</html>

修改

以下是基于以下答案的更新代码，仍然得到相同的错误Uncaught ReferenceError: showDialog is not defined'：

<!DOCTYPE html>
<html >
<head>

    <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/dojo/1.9.2/dijit/themes/tundra/tundra.css"/>

    <script>dojoConfig = {parseOnLoad: true}</script>
    <script src="//ajax.googleapis.com/ajax/libs/dojo/1.10.1/dojo/dojo.js"></script>

    <script type="text/javascript"> 

require(["dijit/Dialog", "dijit/form/HorizontalSlider", "dijit/registry","dojo/domReady!"], function(Dialog, HorizontalSlider, registry){

        var imageSlider = new HorizontalSlider({
                value: 7,
                minimum: 0,
                maximum: 10,
                intermediateChanges: true,
                discreteValues: 11,
                showButtons: true,
                style: "width:200px;",
                //onChange: lang.hitch(this, function(value) {
                    //imageServiceLayer.setOpacity(value / 10); 
                //})
            }, "imageSlider");
            imageSlider.startup();

     myDialog = new Dialog({
        id: "MyDialog",
        title: "Image Opacity",
        content: imageSlider,
        style: "width: 225px"
    });

    function showDialog(){
        var widget = registry.byId("MyDialog");
        widget.showDialog();
    }
});

    </script>
</head>
<body class="tundra">
    <button onclick="myDialog.show();">show</button>
    <a href="javascript:void(0)"onclick="showDialog();">show</a>
</body>
</html>

Answer 1

您错误的是您使用javascript:void(0)错误而不是

 <a href="javascript.void();"onclick="showDialog();">show</a>

你应该做一些看起来像这样的事情

 <a href="javascript:void(0)"onclick="showDialog();">show</a>

确保不将;放在void的末尾，并将零作为参数插入

更新2

您需要创建一个可以称之为showDialog

的方法

所以看起来像这样：

function showDialog(){
  require(["dijit/registry"], function(registry){
    var widget = registry.byId("MyDialog");
   widget.showDialog();
   });
 }

添加此功能，这不会引发错误，并且会出现标识为MyDialog的对话框

更新3

正如frank所说，你需要将showDialog放在require上下文之外的函数中，你需要调用正确的方法来显示对话框。

你的新代码看起来像这样我在本地测试它并且它100％工作

<!DOCTYPE html>
<html >
<head>

    <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/dojo/1.9.2/dijit/themes/tundra/tundra.css"/>

    <script>dojoConfig = {parseOnLoad: true}</script>
    <script src="http://ajax.googleapis.com/ajax/libs/dojo/1.10.1/dojo/dojo.js"></script>

    <script type="text/javascript">

//这是将showDialog函数放在require之外的地方。 var showDialog;

require(["dijit/Dialog", "dijit/form/HorizontalSlider", "dijit/registry","dojo/domReady!"], function(Dialog, HorizontalSlider, registry){

        var imageSlider = new HorizontalSlider({
                value: 7,
                minimum: 0,
                maximum: 10,
                intermediateChanges: true,
                discreteValues: 11,
                showButtons: true,
                style: "width:200px;",
                //onChange: lang.hitch(this, function(value) {
                    //imageServiceLayer.setOpacity(value / 10); 
                //})
            }, "imageSlider");
            imageSlider.startup();

     myDialog = new Dialog({
        id: "MyDialog",
        title: "Image Opacity",
        content: imageSlider,
        style: "width: 225px"
    });
//here you create the function
      showDialog = function(){

//and this is how you call the dialog to show, you did it right in the button but not inside the function
         myDialog.show();
    }
});

    </script>
</head>
<body class="tundra">
    <button onclick="myDialog.show();">show</button>
    <a href="javascript:void(0)"onclick="showDialog();">show</a>
</body>
</html>

并且正如sixtyfootersdude所说，你不需要使用registry.byId我插入那里让你明白如果你知道ID，你可以在你所在的上下文之外显示对话框，但无论如何不是情况下。

这样可行。

Answer 2

如果我是你，我会删除你对dijit注册表的依赖。这是管理小部件的一种糟糕方式。我会更新到这个：

require(["dijit/Dialog", "dijit/form/HorizontalSlider", "dojo/domReady!"], function(Dialog, HorizontalSlider) {

    var imageSlider = new HorizontalSlider({
            ...
    }, "imageSlider");
    imageSlider.startup();

    myDialog = new Dialog({
            ...
    });

    function showDialog() {
        console.log("You already have a reference to dialog.  It is in the same closure as this.  Dialog", myDialog);
        myDialog.showDialog();
    }
});

现在你报告了：

未捕获的ReferenceError：未定义showDialog'：

这是在您定义的showDialog功能上还是在myDialog.showDialog上？

在链接点击，javascript第2部分创建一个对话框

2 个答案: