Multiple Modal Use - Bug

Question

I have a client who wants their values image to contain a series of hot spots, so that clicking on each value opens up a video about that value.

I have created the responsive hotspots, which are temporarily coloured red so you can see them, apart from the top left one. Each hotspot contains a transparent button, to trigger the pop-up. The hot spots will eventually all be transparent, like the top left one.

I tried using a Modal approach, which does now generate the pop-up windows, but when clicking the top left value, and the top right red hot spot, they both trigger the same pop-up. I'm a bit out of my depth now as have tried naming the modals differently, but with no success. Can anyone help please.

You can view the current progress here: http://blend.accountants/map-b.html

Answer 1

Probably the simplest fix is just this:

btn.onclick = function() {
  document.getElementById("myModal").style.display = "block";
}

Then later:

btn.onclick = function() {
  document.getElementById("myModal2").style.display = "block";
}

The problem is that by using modal directly in the callback the code just picks up the last-used global instance; here we explicitly look up each element.

Another way that allows you just to have a single onclick function for every button would be:

function displayModal() {
  document.getElementById(this.id).style.display = "block";
}

btn.onclick = displayModal;