JSFiddle - React, Tailwind, and code Playground

by Simon Hi

HTML

<button type="button" class="articleBtn" onclick="ouvreMaJolieAlert(event,'Contenu de cette alerte article1');">article1</button>
<br>
<button type="button" class="articleBtn" onclick="ouvreMaJolieAlert(event,'Contenu de cette alerte article10');">article10</button>
<br>
<button type="button" class="articleBtn" onclick="ouvreMaJolieAlert(event,'Contenu de cette alerte article2');">article2</button>
<br>
<button type="button" class="articleBtn" onclick="ouvreMaJolieAlert(event,'Contenu de cette alerte article20');">article20</button>
<br>

<button type="button" class="articleBtn" onclick="ouvreMaJolieAlert(event,'Contenu de cette alerte article3');">article3</button>

CSS

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

.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(event, m) {
  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, event.target);
}