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

Please specify your problem and have you tried, and add the relevant code snippets directly here. — Aimnox, Jan 17 '20 at 08:49

score 0 · Accepted Answer · answered Jan 17 '20 at 08:54

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;

Sorry, one further thing. When a modal is closed, the video iframe carries on playing, so the sound can be heard even though there is no video. Is there a way to terminate the process in the modal when it is closed please? — Ben Yates, Feb 20 '20 at 15:54

Multiple Modal Use - Bug

1 Answers1