📢 Nuovo Corso Laravel API disponibile!

Creare Modal

Traccia

Create un versione molto grezza di una finestra Modale che compaia al click di un bottone. Aggiungete alla finestra un bottone per chiuderla.

Per modal si intende la finestra popup che appare al centro dello schermo per informazioni e/o azioni aggiuntive da compiere.

Vi lascio un esempio di Modal da visionare, anche se quello che interessa in questo esercizio non è tutta la parte di stile, ma la logica Javascript.

https://getbootstrap.com/docs/4.0/components/modal/#live-demo

Soluzione

Pagina HTML

<!DOCTYPE html>
<html lang="it">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-gray-200 flex flex-col items-center justify-center">
<h1>Creare una Modal</h1>
<button id="open-modal" class="p-3 m-3 bg-blue-300 rounded-md text-white">
Apri Modal
</button>
<div id="modal" class="w-[500px] h-[500px] bg-white rounded-xl p-3 hidden">
<button id="close-modal" class="float-right">
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
class="w-6 h-6">
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M6 18L18 6M6 6l12 12" />
</svg>
</button>
</div>
<script src="script.js"></script>
</body>
</html>

Pagina Script.js

const openModalBtn = document.getElementById("open-modal");
const closeModalBtn = document.getElementById("close-modal");
const modal = document.getElementById("modal");
openModalBtn.addEventListener("click", openModal);
closeModalBtn.addEventListener("click", closeModal);
function openModal() {
console.log("apro modal");
modal.classList.remove("hidden");
}
function closeModal() {
console.log("chiudo modal");
modal.classList.add("hidden");
}