JSFiddle - React, Tailwind, and code Playground

by Simon Hi

HTML

<p>
  <span id="monArticle" class="article">Mon joli article</span>
</p>
<p>
  Quantité : <select onchange="faisQuelqueChose(event)">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
  </select></p>
<p>
  Sélectionnez la valeur 5 pour voir quelque chose !
</p>

CSS

.article {
  display: inline-block;
  margin: 0.25em;
  border: 1px solid black;
}

.maJolieAlert {
  position: absolute;
  z-index: 10;
  left: 10%;
  border: 1px solid black;
  border-radius: 0.25em;
  padding: 0.25em;
  background: white;
}

JavaScript

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

function ouvreMaJolieAlert(a, m) {
  // ajoute le message m dans une alerte près de l'élément a
  function insertAfter(newNode, existingNode) {
    existingNode.parentNode.insertBefore(newNode, existingNode.nextSibling);
  }
  let e = document.createElement('div');
  let s = '<p>' + m + '</p>';
  e.classList.add("maJolieAlert");
  s += '<button type="button" onclick="fermeMaJolieAlert(event)">OK</button>';
  e.innerHTML = s;
  insertAfter(e, a);
}

function faisQuelqueChose(event) {
  let q = event.target.value;
  if (q == "5") {
    let a = document.getElementById('monArticle');
    let m = 'Quantité maximum atteinte !';
    ouvreMaJolieAlert(a, m);
  }
}