Modal dialog

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%;
}

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