Comment créer une boîte de dialogue en javascript?

Question

Le but est de créer un dialogue similaire à celui de stackoverflow qui s'affiche en cliquant sur le bouton 'flag' situé sous une question, mais comme je suis nouveau dans le développement web, je ne comprends pas certaines choses.

C'est ce que j'ai:

1. Ceci est le balisage pour le bouton:

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

   -Je ne comprends pas comment cela exécute un événement, il y a généralement une balise onclick Comment ça va au script?

2. Ce sont les js externes contenant des fonctions pour accepter les réponses, le vote et signalement de messages: http://sstatic.net/so/js/question.js?v=6274

   Vous pouvez unminify pour une meilleure vue sur http://jsbeautifier.org/

3. fonctions nécessaires:

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

Problème: Quand j'inclure les fonctions externes dans un nouveau fichier html, ajoutez la balise pour le bouton, en cliquant sur le bouton ne fait rien

Questions:

1. Où suis-je le fais mal?
2. Quelle est la relation entre le balisage de bouton et le javascript (je ne comprends pas comment il déclenche un événement s'il n'y a pas de balise onclick)?
3. Comment débuggeriez-vous ceci à stackoverflow? J'utilise Firebug, mais je ne peux pas définir de points d'arrêt.Veuillez indiquer les meilleurs débogueurs et (éventuellement) les éditeurs pour javascript.

S'il vous plaît décrire dans les détails si possible, je suis nouveau au développement web.

Merci d'avance!

Answer 1

Vous devriez également remarquer à partir du code source qui utilise des jQuery, qui est un framework javascript ..

Vous pouvez utiliser jquery pour lier des gestionnaires à des événements spécifiques dans les DOM comme

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

Answer 2

De ce que je peux dire, SO utilise un certain jQuery pour ajouter le gestionnaire plus tard.

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

Cette fonction retourne le lien qui a un identifiant commençant par « drapeau-post », à savoir le bouton de drapeau.

Plus tard, il va utiliser cela pour ajouter un gestionnaire, je suis assez sûr. Avec le code de SO étant assez obscurci, il vaut mieux coder quelque chose à partir de zéro que d'essayer de comprendre exactement ce que SO fait.

Cela ne devrait pas être trop difficile à faire. Ajoutez le gestionnaire manuellement ou utilisez un petit jQuery comme ci-dessus pour ajouter un "gestionnaire" .click.Ou, Dieu vous en préserve, utilisez du javascript ancien, ou ajoutez même un attribut onclick à votre lien. :)

En réponse à # 3, il serait difficile de suivre ce code à l'aide d'un débogueur, car vous traverserez plusieurs lots de code jQuery. Vous perdrez rapidement la trace de ce qui se passe réellement. Encore une fois, il vaut mieux émuler le comportement que de répliquer la fonctionnalité exacte.