如何在 javascript 中创建对话框？

Question

目标是创建一个类似于 stackoverflow 上的标志对话框，该对话框在单击问题下方的“标志”按钮时显示，但由于我是 Web 开发新手，所以我不了解某些内容。

这就是我所拥有的：

1. 这是按钮的标记：

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

   -我不明白这是怎么执行事件的，一般都有onclick标签。怎么去脚本的？

2. 这是包含接受答案、投票和标记帖子功能的外部 js： http://sstatic.net/so/js/question.js?v=6274

   您可以在 http://jsbeautifier.org/

   上取消缩小以更好地查看

3. 需要的功能：

   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

据我所知，SO 稍后会使用一些 jQuery 添加处理程序。

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

该函数返回id以“flag-post-”开头的链接，即标志按钮。

稍后它将使用它来添加一个处理程序，我很确定。由于 SO 的代码相当模糊，您最好从头开始编写代码，而不是试图弄清楚 SO 到底在做什么。

做起来应该不会太难。手动添加处理程序，或者使用上面的小 jQuery 添加 .click “处理程序”。或者，天堂禁止，使用一些普通的旧 javascript，甚至在您的链接中添加一个 onclick 属性。 :)

在回答 #3 时，使用任何调试器都很难跟踪此代码，因为您将单步执行大量 jQuery 代码。您将很快忘记实际发生的事情。同样，您最好模拟行为而不是复制确切的功能。