html - Javascript Modal for Web Infographic -

I used simple JavaScript practice to teach college-level students how to make things interactive on the web in graphic design I am preparing. / P>

I am also new to javascript, and I have written a simple script that shows you a model box when clicking a button. The problem is, I have to create a new function for every single button on my page. Is there a way to have a function? Below I have a code of up to now.

I have also made one but the model is not popping up. It works on my computer. I have also uploaded my code.

  & lt ;; Doctype & gt; & Lt; Html & gt; & Lt; Top & gt; & Lt; Style & gt; Body {margin: 0; Padding: 0; Background color: RGBA (220, 220, 220, 1); } #mainContent {width: 960px; Height: 680 pixels; Margin: 80px auto 0 auto; Background-image: url (home.png); Border: 1 px solid gray; Range radius: 8px; Background color: white; } # Button 1 {status: relative; Top: 250px; Left: 500 pounds; Width: 40px; } #club button {status: complete; Top: -20px; Correct: -20px; Width: 40px; } # Info Box.one {Status: Relative; Top: 250px; Left: 530px; Visibility: hidden; Width: 300px; Margin: 0; Background color: white; Limit: 1px solid black; Padding: 15px; Text align: center; Range radius: 8px; } & Lt; / Style & gt; & Lt; Script & gt; Function infoBox () {button = document.getElementById ("infoBox"); button. Style Visibility = (button style. Visibility == "visible")? "Hidden": "visible"; } & Lt; / Script & gt; & Lt; / Head & gt; & Lt; Body & gt; & Lt; Div id = "main content" & gt; & Lt; A href = '#' onclick = 'infobox ()' & gt; & Lt; Img id = "button1" src = "button.png" / & gt; & Lt; / A & gt; & Lt; Div id = "infobox" class = "one" & gt; & Lt; P & gt; Your information goes here. & Lt; / P & gt; & Lt; A href = '#' onclick = 'infobox ()' & gt; & Lt; Img id = "closeButton" src = "close.png" / & gt; & Lt; / A & gt; & Lt; / Div & gt; & Lt; / Div & gt; & Lt; / Body & gt; & Lt; / Html & gt;  

You can try, it is to use the fact that click Events to bubble the tree tree (Event Delegation). By using this idea, you can tie an event handler to a parent container (for example, body ) and handle all the clicks from there:

  Document.body.addEventListener ('click', function (e) {if (e.target.parentNode.className === 'BTN-model') {infoBox ();}}, false);  

Note: I am checking the parentNode class because the image is clicked on the element, which is the link with .btn-modal Is the child of .

If you are interested, then parents have a version of the generic approach to handling events handed over without trusting the node.

In the above case, I represent the buttons that we want to handle with our list of specific categories:

   & Lt; / A & gt;  

This is a very naive and basic example but it reflects this idea.

Demo: