如何在javascript中創建對話框？

Question

目標是創建一個類似於在stackoverflow上的標誌對話框，顯示點擊位於問題下的'標誌'按鈕，但由於我是網絡開發新手，我不瞭解某些事情。

這是我有：

1. 這是該按鈕的標記：

   <a id="flag-post-2239985" title="flag this post for serious problems">flag</a> 
   

   - 我不明白這是如何執行的情況下，通常有一個onclick標籤它如何去腳本？

2. 這是一個包含函數接受的答案，投票和標記帖外部JS：在http://jsbeautifier.org/

3. http://sstatic.net/so/js/question.js?v=6274

   可以unminify它更好的視野所需的功能：

   flag: function (F) { 
       var D = F.attr("id").substring("flag-post-".length); 
       var K = "form-flag-" + D; 
       var N = $("#" + D + "-is-owned-by-current-user").length > 0; 
       var L = [ 
        [l.offensive, "Offensive, Abusive, or Hate Speech", !N], 
        [l.spam, "Spam", !N], 
        [l.informModerator, "Requires Moderator attention", true] 
       ]; 
       var I = '<div class="popup flag-menu"><h2>Please flag with care:</h2>'; 
       I += '<div class="flag-reasons"><form id="' + K + '">'; 
       for (var G = 0; G < L.length; G++) { 
        if (L[G][2]) { 
         var M = "flag-radio" + D + "-" + L[G][0]; 
         I += '<input type="radio" id="' + M + '" name="flag-' + D + '" value="' + L[G][0] + '">'; 
         I += '<label for="' + M + '">' + L[G][1] + "</label><br>" 
        } 
       } 
       I += '<div class="flag-comment">Why are you flagging this post?<textarea name="flag-reason" cols="33" rows="4"></textarea>'; 
       I += '<br><span class="text-counter"></span></div>'; 
       I += "</form></div>"; 
       I += '<input type="button" class="flag-cancel" value="Cancel"><input type="button" class="flag-submit" value="Flag Post">'; 
       I += "</div>"; 
       var H = $(I); 
       var E = H.find("#" + K); 
       var J = E.find("textarea"); 
       E.find("input").click(function() { 
        var O = E.find("div.flag-comment"); 
        var P = vote.flagIsInform(E); 
        O.toggle(P); 
        if (P) { 
         J.focus() 
        } 
        vote.flagAllowSubmit(H, J, P) 
       }); 
       J.charCounter({ 
        min: 10, 
        max: 150, 
        setIsValid: function() { 
         vote.flagAllowSubmit(H, J, vote.flagIsInform(E)) 
        } 
       }); 
       H.find(".flag-submit").click(function() { 
        if (vote.flagIsInform(E) && !vote.flagTextValid(J)) { 
         return 
        } 
        vote.flagSubmit(F, D, E, J) 
       }); 
       H.find(".flag-cancel").click(function() { 
        vote.flagClosePopup(F) 
       }); 
       F.parent().append(H); 
       H.fadeIn("fast") 
   }, 
   flagIsInform: function (D) { 
       var E = D.find("input:radio:checked"); 
       if (E.length == 0) { 
        return false 
       } 
       return E.val() == l.informModerator 
   }, 
   flagAllowSubmit: function (E, F, G) { 
       var D = G ? vote.flagTextValid(F) : true; 
       E.find(".flag-submit").toggle(D) 
   }, 
   flagTextValid: function (E) { 
       var D = E.val().length; 
       return (D >= 10 && D <= 150) 
   }, 
   flagClosePopup: function (D) { 
       D.parent().find(".popup").fadeOut("fast", function() { 
        $(this).remove() 
       }) 
   }, 
   flagSubmit: function (G, E, D, H) { 
       vote.flagClosePopup(G); 
       var F = D.find("input:radio:checked").val(); 
       var E = G.attr("id").substring("flag-post-".length); 
       if (F == l.informModerator) { 
        $.ajax({ 
         type: "POST", 
         url: "/messages/inform-moderator-about-post/" + E, 
         dataType: "json", 
         data: { 
          fkey: fkey, 
          msg: H.val() 
         }, 
         success: function (I) { 
          showAjaxError(G.parent(), I.Message) 
         }, 
         error: function (I, K, J) { 
          showAjaxError(G.parent(), (I.responseText && I.responseText.length < 100 ? I.responseText : "An error occurred during submission")) 
         } 
        }) 
       } else { 
        q(G, E, F, vote.flagSubmitCallback, { 
         comment: H.val() 
        }) 
       } 
   }, 
   flagSubmitCallback: function (E, D, G) { 
       if (G && G.Success) { 
        if (G.Message) {} 
       } else { 
        var F = E.parent(); 
        if (G && G.Message) { 
         showAjaxError(F, G.Message) 
        } else { 
         showAjaxError(F, "A problem occurred during flagging") 
        } 
       } 
   } 
   

問題：當我包括一個新的HTML文件中的外部函數，添加標記的按鈕，點擊該按鈕並沒有

問題：

1. 我在哪裏做錯了？
2. 與JavaScript的按鈕標記有什麼關係（我不明白它是如何觸發一個事件，如果沒有onclick標籤）？
3. 你將如何調試這個在stackoverflow？我使用Firebug，但是我不能設置任何斷點。請爲JavaScript揭示更好的調試器和（最終）編輯器。

請詳細描述，如果可能的話，我是網絡開發新手。

預先感謝您！

Answer 1

你也應該從SO使用jQuery源代碼，這是一個JavaScript框架注意到..

您可以使用jQuery綁定處理程序對特定事件的DOM像

$('#flag-post-2239985').click(
      function() { 
         /*executes when someone clicks on the flag button.*/ 
         } 
      ); 

Answer 2

從我可以告訴，所以稍後使用一些jQuery來添加處理程序。

var A=function(){return $("div.post-menu a[id^='flag-post-']")}; 

該函數返回以「flag-post-」開頭的鏈接，即標誌按鈕。

後來它會用它來添加一個處理程序，我很確定。由於SO的代碼相當混亂，所以最好從頭開始編寫代碼，而不是試圖弄清楚SO正在做什麼。

這不應該太難做。要麼手動添加處理程序，要麼使用上面的一個小jQuery來添加.click「處理程序」。或者，天堂禁止，使用一些普通的舊javascript，或者甚至爲你的鏈接添加一個onclick屬性。 :)

在回答＃3時，使用任何調試器都很難跟蹤此代碼，因爲您將逐步完成大量的jQuery代碼。你會很快失去正在發生的事情。同樣，你最好模仿行爲而不是複製確切的功能。