Добавить несколько ссылок на Javascript Iframe popup

Question

как мне добавить несколько ссылок на этот JavaScript, JavaScript - это всплывающее окно Iframe, которое запускается по внешней ссылке, мне нужно добавить 3 ссылки, чтобы вызвать 3 разных всплывающих окна.

I Я изучил JavaScript и попробовал другие способы. Я искал стек и не нашел ничего, что могло бы обеспечить решение.

Любая помощь будет оценена.

Вот HTML для использования JavaScript с 1 ссылкой.

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

Вы можете использовать class для ссылки на несколько элементов. Выделите все элементы класса с помощью querySelectorAll(), а затем l oop через них, чтобы прикрепить событие.

Вы можете связать связанную ссылку в самом элементе a , используя пользовательский атрибут, затем по щелчку вы можете получить его и установить его в качестве всплывающего iframe sr c.

Попробуйте следующим образом:

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>