为什么不通过我的Javascript对话框工作

我一直在尝试很长时间才能使此对话框工作。我爬过谷歌，看看这里的众多问题。无论如何，我无法让它工作形状或形式。我试图得到与此类似的结果： http://example.nemikor.com/basic-usage-of-the-jquery-ui-dialog/为什么不通过我的Javascript对话框工作

我曾尝试使用此源中的代码，但是我无法使其工作。

这是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 /所以请不要在我身上撕裂太糟糕。

谢谢。

来源

2011-07-27 Aaron Lee

什么“不起作用”是什么意思？你有错误吗？ – JJJ

对不起，这有点乏味，我的意思是，当我按下按钮时，什么也没有发生，没有功能运行或任何东西。 –

如果这是完整的代码，您尚未关闭第一个“{”。 JavaScript控制台应该会显示语法错误。您可以使用连贯的缩进来避免这些错误。 –

右大括号在这里注释掉：

"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>

来源

2011-07-27 10:46:15 Caner

工作过！谢谢你的男人！ –

-2

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

摘录：

简单的解决这个问题是实例化对话与的AutoOpen设置为false，然后调用.dialog（“开放'）在事件处理程序。

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

来源

2011-07-27 10:38:36 ramtheconqueror

这不正是OP所做的？ – JJJ

您对此行的错误，因为最终的行您的评论隐藏解释闭花括号。

"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>

来源

2011-07-27 10:45:05 lazyhammer

是的，我现在试过了，仍然无济于事。问题似乎是，实际的按钮不运行该功能，我不知道我是否正确引用它。 –

也许你忘了附加jquery-ui脚本？ :) – lazyhammer

为什么不通过我的Javascript对话框工作

回答

相关问题