Modal dialog

by Simon Hi

HTML

<button type="button" class="articleBtn" data-nom="Le pack incroyable" onclick="ouvreMaJolieAlert(event);">article1</button>
<br>
<button type="button" class="articleBtn" data-nom="La merveille des merveilles" onclick="ouvreMaJolieAlert(event);">article10</button>
<br>
<button type="button" class="articleBtn" data-nom="La boite magique" onclick="ouvreMaJolieAlert(event);">article2</button>
<br>
<button type="button" class="articleBtn" data-nom="Le truc à tout faire" onclick="ouvreMaJolieAlert(event);">article20</button>
<br>

<button type="button" class="articleBtn" data-nom="Le machin bien" onclick="ouvreMaJolieAlert(event);">article3</button>

CSS

button.articleBtn {
  border: 0;
  background: none;
  text-decoration: underline;
  cursor: pointer;
}

.maJolieAlert {
  position: absolute;
  z-index: 10;
  left: 10%;
}

.maJolieAlert:before {
  content: "";
  position: fixed;
  z-index: -10;
  display: block;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: #0007;
}

.maJolieAlert>div {
  border: 0.25em solid black;
  border-radius: 0.25em;
  padding: 0.25em;
  background: #fff;
}

JavaScript

function fermeMaJolieAlert(event) {
  event.target.parentNode.parentNode.remove();
}

function ouvreMaJolieAlert(event) {
  let m;
  m = "L'article \"";
  m += event.target.getAttribute("data-nom");
  m += "\" a bien été ajouté au panier";
  function insertAfter(newNode, existingNode) {
    existingNode.parentNode.insertBefore(newNode, existingNode.nextSibling);
  }
  let e = document.createElement('div');
  let s = "";
  e.classList.add("maJolieAlert");
  s += '<div><p>' + m + '</p>';
  s += '<button type="button" onclick="fermeMaJolieAlert(event)">OK</button></div>';
  e.innerHTML = s;
  insertAfter(e, event.target);
}