Question

我一直在尝试让这个对话框工作很长时间。我已经抓住了谷歌并在这里看了很多问题。我无论如何都无法让它以形状或形式工作。我试图得到类似的结果： http://example.nemikor.com/basic-usage-of-the-jquery-ui-dialog/

我确实尝试过使用此源代码，但我无法使用该代码。

这是jQuery：

<script type="text/javascript">
  $(document).ready(function(){

     // Initialize my dialog
     $("#dialog").dialog({
       autoOpen: false,
       modal: true,
       buttons: {
       "OK":function() { // do something },
       "Cancel": function() { $(this).dialog("close"); }
    }
});

 // Bind to the click event for my button and execute my function
       $("#x-button").click(function(){
       Foo.DoSomething();
       });
   });

       var Foo = {
       DoSomething: function(){
       $("#dialog").dialog("open");
     }
   }

这是HTML：

<div id="column1">
        <h2>
            Features</h2>
        <p>
            Click an image below to view more information on our products.</p>
        <img src="../Images/lockIcon.png" alt="Security" />
        <input id="x-button" type="button" />
        <p id="dialog" display="none">This is content!</p>
</div>

我已经尝试了一切让它发挥作用，但它没有发生。 jQuery本身就是来自这里的类似问题的答案，我试图在我自己放弃生活之后使用它，如果你能帮助我，我会非常感激，请注意，我是Javascript /的新手jQuery所以请不要扯我太糟糕。

感谢。

Answer 1

您在此行中有错误，因为您的行尾注释会隐藏解释器的大括号。

"OK":function() { // do something },

您需要将其删除或替换为/* do something */。

这对我有用：

<html>
    <head>
        <link type="text/css" href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.14/themes/ui-lightness/jquery-ui.css" rel="stylesheet"/>
        <script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.6.2.min.js"></script>
        <script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.14/jquery-ui.min.js"></script>
        <script type="text/javascript">
            $(document).ready(function(){
                // Initialize my dialog
                $("#dialog").dialog({
                    autoOpen: false,
                    modal: true,
                    buttons: {
                        "OK":function() { },
                        "Cancel": function() { $(this).dialog("close"); }
                    }
                });

                // Bind to the click event for my button and execute my function
                $("#x-button").click(function(){
                    Foo.DoSomething();
                });
            });

            var Foo = {
                DoSomething: function(){
                    $("#dialog").dialog("open");
                }
            }
        </script>
    </head>
    <body>
        <div id="column1">
            <h2>Features</h2>
            <p>Click an image below to view more information on our products.</p>
            <img src="../Images/lockIcon.png" alt="Security" />
            <input id="x-button" type="button" />
            <p id="dialog" display="none">This is content!</p>
        </div>
    </body>
</html>

Answer 2

结束括号在这里注释掉：

"OK":function() { // do something },

你需要小心关闭括号和花括号。它们存在更多问题，我修复了它们，以下工作：

<html>
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.1/themes/base/jquery-ui.css">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.1/jquery-ui.min.js"></script>

<script type="text/javascript">
$(document).ready(function(){

     // Initialize my dialog
     $("#dialog").dialog({
        autoOpen: false,
        modal: true,
        buttons: {
            "OK":function() {},
            "Cancel": function() { $(this).dialog("close"); }
        }
    }
    );

    // Bind to the click event for my button and execute my function
    $("#x-button").click(function(){
        Foo.DoSomething();
    });


    var Foo = {
        DoSomething: function(){
            $("#dialog").dialog("open");
        }
    }
});
</script>
</head>
<body>


<div id="column1">
        <h2>
            Features</h2>
        <p>
            Click an image below to view more information on our products.</p>
        <img src="../Images/lockIcon.png" alt="Security" />
        <input id="x-button" type="button" />
        <p id="dialog" display="none">This is content!</p>
</div>
</body>
</html>

Answer 3

这是解决方案 http://blog.nemikor.com/2009/04/08/basic-usage-of-the-jquery-ui-dialog/

摘录该页面：

此问题的简单解决方案是使用实例化对话框 autoOpen设置为false，然后在事件中调用.dialog（'open'）处理程序。

$('#opener').click(function() {
        $dialog.dialog('open');
        // prevent the default action, e.g., following a link
        return false;
    });

为什么我的Javascript对话框不起作用

3 个答案: