I am having trouble adding the micromodal library to my project.
This is the link to the library:
https://micromodal.vercel.app/#introduction
I followed all the steps in the documentation but without success.
This is my code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Modale</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/micromodal/0.4.10/micromodal.min.js" integrity="sha512-qcwcAul7d7yUcoz3MmQABiaGDa+gVkaDWgZX6wEd/z3I6z62nQCDW3EqioQG+O+QlGCpxmJLdH5snh4IaDPiPA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
</head>
<body>
<button id="openmodal">Open</button>
<!-- [1] -->
<div id="modal-1" aria-hidden="true">
<!-- [2] -->
<div tabindex="-1" data-micromodal-close>
<!-- [3] -->
<div role="dialog" aria-modal="true" aria-labelledby="modal-1-title">
<header>
<h2 id="modal-1-title">
Modal Title
</h2>
<!-- [4] -->
<button aria-label="Close modal" data-micromodal-close>Close</button>
</header>
<div id="modal-1-content">
Modal Content
</div>
</div>
</div>
</div>
<script>
document.getElementById('openmodal').addEventListener('click',function(){
MicroModal.show('modal-1'); // [1]
})
</script>
</body>
</html>
Can someone please help me?