creating a dialog box on link click, javascript

问题

I would like to be able to launch a popup or dialog box when clicking on a link in my application - I want to add a horizontal slider to this window so the user can adjust the data displayed. I have been researchng various dijit widgets but am unsure of what will work, I have tried to test some of the widgets like dialog, TooltipDialog but have not gotten any results. i am also very new to javascript so my coding is not the greatest. I'm looking for some useful samples if anyone has suggestions. I tried to start with the sample code on the dojo website but haven't been able to get that to work either, I know I am missing something.

Here's an example below where I am just trying to create a dialog box off a button (code taken from dojo site), before testing with a link. I keep getting the error myDialog is not defined. Even when I put var before myDialog, I still get the same error.

<!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.7.1/dojo/dojo.js"></script>

    <script>
require(["dijit/Dialog", "dojo/domReady!"], function(Dialog){
    var myDialog = new Dialog({
        title: "My Dialog",
        content: "Test content.",
        style: "width: 300px"
    });
});
    </script>
</head>
<body class="claro">
    <button onclick="myDialog.show();">show</button>
</body>
</html>

回答1:

There are couple of mistakes in your code.

1) Using the wrong styling.
The body tag has claro styling where as you have requested tundra in you link tag.

<body class="claro">

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

Need to change one of them.
change link tag to claro stylesheet. e.g

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

myDialog is locally scoped.

Any variable declared using a var keyword inside a function is only available within the function.

function(Dialog){
    var myDialog = new Dialog({...
}

Variable myDialog is not visible outside the function. To make myDialog global you need to remove the var keyword.e.g

myDialog = new Dialog({....

回答2:

You can use the kendo-ui. Look for kendo-ui documenttion on google

来源：https://stackoverflow.com/questions/26897317/creating-a-dialog-box-on-link-click-javascript

标签

javascript

hyperlink

dojo

popup