Как мне создать диалог в JavaScript?

Question

Цель состоит в том, чтобы создать аналогичное диалоговое окно флага в stackoverflow, которое отображается при нажатии кнопки «флаг», расположенной под вопросом, но, поскольку я новичок в веб-разработке, я не понимаю некоторые вещи.

Вот что у меня есть:

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-']")};

Эта функция возвращает ссылку, идентификатор которой начинается с «flag-post-», т. Е. Кнопка flag.

Позже он будет использовать это для добавления обработчика, я почти уверен. Поскольку код SO довольно запутан, вам лучше кодировать что-то с нуля, чем пытаться точно понять, что делает SO.

Это не должно быть слишком сложно сделать. Либо добавьте обработчик вручную, либо используйте маленький jQuery, как описано выше, чтобы добавить .click «обработчик». Или, не дай бог, используйте какой-нибудь простой старый javascript или даже добавьте атрибут onclick к своей ссылке. :)

В ответе на вопрос № 3 было бы сложно отследить этот код с помощью любого отладчика, поскольку вы будете проходить через множество кода jQuery. Вы быстро потеряете представление о том, что на самом деле происходит. Опять же, вам лучше подражать поведению, чем копировать точную функциональность.