Come creare: finestra popup
- Pagina precedente Visualizzazione dell'elemento quando l'utente passa il mouse sopra
- Pagina successiva Contenuto pieghevole
Impara come creare finestre popup utilizzando CSS e JavaScript.
Clicca su di me per commutare la visualizzazione della finestra popup!
Una finestra popup semplice!
Come creare una finestra popup
Passo 1 - Aggiungi HTML:
<div class="popup" onclick="myFunction()">Clicca su di me!</div> <span class="popuptext" id="myPopup">Testo popup...</span> </div>
Passo 2 - Aggiungi CSS:
/* Contenitore della finestra pop-up */ .popup { position: relative; display: inline-block; cursor: pointer; } /* Finestra pop-up reale (appare in alto) */ .popup .popuptext { visibility: hidden; width: 160px; background-color: #555; color: #fff; text-align: center; border-radius: 6px; padding: 8px 0; position: absolute; z-index: 1; bottom: 125%; left: 50%; margin-left: -80px; } /* Freccia della finestra pop-up */ .popup .popuptext::after { content: ""; position: absolute; top: 100%; left: 50%; margin-left: -5px; border-width: 5px; border-style: solid; border-color: #555 transparent transparent transparent; } /* Clicca sul contenitore della finestra pop-up per commutare questa classe (nascondere e mostrare la finestra pop-up) */ .popup .show { visibility: visible; -webkit-animation: fadeIn 1s; animation: fadeIn 1s } /* Aggiungi animazione (fading della finestra pop-up) */ @-webkit-keyframes fadeIn { from {opacity: 0;} to {opacity: 1;} } @keyframes fadeIn { from {opacity: 0;} to {opacity:1 ;} }
Passo 3 - Aggiungi JavaScript:
<script> // Quando l'utente clicca su <div>, apri la finestra pop-up function myFunction() { var popup = document.getElementById("myPopup"); popup.classList.toggle("show"); } </script>
Pagine correlate
Tutorial:Strumenti CSS tooltip
Tutorial:Come creare modale
- Pagina precedente Visualizzazione dell'elemento quando l'utente passa il mouse sopra
- Pagina successiva Contenuto pieghevole