Add multiple links to Javascript Iframe popup

Question

how do I add multiple links to this JavaScript, the JavaScript is an Iframe popup, triggered by an external link, I need to add 3 links to trigger 3 different page popups.

I have studied the JavaScript and tried different ways.I searched stack, and found nothing that could provide a solution.

Any help would be appreciated.

Here is the HTML for using the JavaScript with 1 link.

 document.getElementById("link").onclick = function(e) { e.preventDefault(); document.getElementById("popupdarkbg").style.display = "block"; document.getElementById("popup").style.display = "block"; document.getElementById('popupiframe').src = "http://example.com"; document.getElementById('popupdarkbg').onclick = function() { document.getElementById("popup").style.display = "none"; document.getElementById("popupdarkbg").style.display = "none"; }; return false; } window.onkeydown = function(e) { if (e.keyCode == 27) { document.getElementById("popup").style.display = "none"; document.getElementById("popupdarkbg").style.display = "none"; e.preventDefault(); return; } }

 #popup { display: none; position: fixed; top: 12%; left: 15%; width: 70%; height: 70%; background-color: transparent; z-index: 10; } #popup iframe { width: 100%; height: 100%; border: 0; } #popupdarkbg { position: fixed; z-index: 5; left: 0; top: 0; width: 100%; height: 100%; overflow: hidden; background-color: rgba(0,0,0,.75); display: none; }

 <div id="main"> <a href="" id="link">Click me</a><br> </div> <div id="popup"><iframe id="popupiframe"></iframe></div> <div id="popupdarkbg"></div>

Answer 1

You can use class to refer multiple elements. Select all the elements with the class with querySelectorAll() , then loop through them to attach the event.

You can associate the related link in the a element itself using a custom attribute, then on click you can retrieve that and set that as the popup iframe src .

Try the following way:

 document.querySelectorAll('.link').forEach(function(lk){ lk.onclick = function(e) { e.preventDefault(); document.getElementById("popupdarkbg").style.display = "block"; document.getElementById("popup").style.display = "block"; document.getElementById('popupiframe').src = this.getAttribute('data-link'); console.log(this.getAttribute('data-link')); document.getElementById('popupdarkbg').onclick = function() { document.getElementById("popup").style.display = "none"; document.getElementById("popupdarkbg").style.display = "none"; }; return false; } }); window.onkeydown = function(e) { if (e.keyCode == 27) { document.getElementById("popup").style.display = "none"; document.getElementById("popupdarkbg").style.display = "none"; e.preventDefault(); return; } }

 #popup { display: none; position: fixed; top: 12%; left: 15%; width: 70%; height: 70%; background-color: transparent; z-index: 10; } #popup iframe { width: 100%; height: 100%; border: 0; } #popupdarkbg { position: fixed; z-index: 5; left: 0; top: 0; width: 100%; height: 100%; overflow: hidden; background-color: rgba(0,0,0,.75); display: none; }

 <div> <a href="" class="link" data-link="http://example.com">Click me</a><br> <a href="" class="link" data-link="http://example-2.com">Click me 2</a> </div> <div id="popup"><iframe id="popupiframe"></iframe></div> <div id="popupdarkbg"></div>