爲什麼不通過我的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對話框工作

回答

相關問題