Élément HTML natif dialog en JavaScript

cliquez ici

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut sodales nec massa eget consectetur. Aliquam a ante ac ex ornare venenatis ut eu nulla. Nunc commodo diam a mi fermentum, vitae sagittis purus tristique. Sed laoreet, lectus eu pretium sagittis, leo sem malesuada mi, id rhoncus libero ex quis velit.

<button id="ouvertureDialog">cliquez ici</button>

<dialog id="demoDialog">

<h3>Lorem ipsum dolor sit amet</h3>

<button aria-label="Fermer"  id="fermeDialog">
<svg aria-hidden="false" role="img" width="32" height="32" viewBox="0 0 24 24">
<path d="M16 8L8 16M8.00001 8L16 16" stroke="currentcolor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
</button>

<p>...</p>

</dialog>

#ouvertureDialog{

display:flex;
margin:2rem auto;
font-size:inherit;
font-family:inherit;
padding:.5rem;
border:3px solid #7d68e8;
background:white;
color:#333
	
}

	



dialog{
	
border: 0;
padding: 0;
border-radius: .5rem;
box-shadow: 0 0 .5rem rgba(0, 0, 0, 0.31)
	
	}


	
dialog::backdrop {
	
	background-color: hsla(0, 0%, 0%, 0.4)
	
	}	
	
	
dialog[open] {
	

max-width:500px;
animation: rebond .8s ease-out
	
	}


dialog h3 {
	

font-size: 2rem;
padding: 1rem;
margin: 0;
border-top-left-radius: .5rem;
border-top-right-radius: .5rem;

}

dialog p{
	
	padding:1rem
	
	}



dialog button {
	
border:none;
background: none;
position: absolute;
top: .2rem;
right: .2rem;

	
}

	


@keyframes rebond{
	0%{opacity:0;transform:scale3d(.3,.3,.3)}
	20%{opacity:1;transform:scale3d(1.1,1.1,1.1)}
	40%{transform:scale3d(.9,.9,.9)}
	60%{transform:scale3d(1.03,1.03,1.03)}
	80%{transform:scale3d(.97,.97,.97)}
	100%{transform:scale3d(1,1,1)}
	}		

 const boutonOuverture = document.getElementById('ouvertureDialog');// on cree une variable sur le bouton ouverture
  const demoDialog = document.getElementById('demoDialog');// on cree une variable pour la boite
  const fermeDialog = document.getElementById('fermeDialog');// on cree une variable sur le bouton fermeture de la boite

  boutonOuverture.addEventListener('click', () => {
    demoDialog.showModal(); // on ouvre la boite dialog
  });

  fermeDialog.addEventListener('click', () => {
    demoDialog.close(); // on ferme la boite dialog
  });