Logo Hpv 4 Learning
Academy
Web Agency
javascript

Manipolare il DOM: creare dropdown e modal in Javascript

By Hpv4Learning 1 min05/03/2022
"Come creare delle accordion e dei modali utilizzando solo Javascript"
Faqs

Troverai nel progetto

Che cosa realizzeremo in questo progetto ?

In questo progetto andremo a simulare la sezione di FAQ di un sito qualsiasi. Andremo a creare due dropdown ed un modale. Perciò andremo a realizzare degli elementi che presentano al loro interno solo una domanda, e premendoci sopra andremo a mostrare anche la risposta. Nel caso dei dropdown, quest'ultima viene mostrata come se uscisse da sotto la domanda, nel caso del modale, invece, verrà mostrata tramite appunto un modale.

Come aprire un dropdown

Per la realizzazione dei dropdown andremo ad utilizzare un medoto che abbiamo già trattato: toggle().

Per prima cosa andimao a selezionare tutti i nodi dei pulsanti che ci serviranno ad aprire i dropdown, andando ad utilizzare il metodo querySelectorAll, che ci restituisce una NodeList contenente tutti i nodi selezionati tramite il selettore passato come parametro.

const buttons = document.querySelectorAll(".question-btn");

A questo punto andiamo ad utilizzare un forEach sulla NodeList, e per ogni bottone selezionato andremo a scrivere un addEventListener. In questo modo dovremo far si che al click sul pulsante, il target si sposti sul contenitore di tutto l'elemento, in modo da poter utilizzare toggle() sull'elemento corretto. Per far ciò utilizzeremo l' event object, accedendo alla proprietà parentElement.

In questo modo:

buttons.forEach((button) => {
  button.addEventListener("click", (e) => {
    const question = e.currentTarget.parentElement.parentElement;
    question.classList.toggle("show-text");
  });
});

Nodi da selezionare per aprire un modale

Per il funzionamento del modale, i nodi che andremo a selezionare sono:

  • il pulsante per l'apertura
  • il pulsante per la chiusura
  • il modale di per se (compreso di overlay)

Cosi:

const modalBtn = document.querySelector(".open-modal-btn");
const modal = document.querySelector(".modal-overlay");
const closeBtn = document.querySelector(".close-btn");

Come aprire e chiudere un modale

Quello che andremo a fare a questo punto è fare in modo che premendo su modalBtn, il modale venga aperto, e che premendo invece su closeBtn, il modale venga chiuso.

Per farlo andremo ad utilizzare degli addEventListener sui pulsanti, ed al click andremo ad aggiungere e rimuovere la classe che ci permetterà di visualizzare il modale.

modalBtn.addEventListener("click", function () {
  modal.classList.add("show-modal");
});
closeBtn.addEventListener("click", function () {
  modal.classList.remove("show-modal");
});

Prossimo Progetto

Manipolare il DOM: Usare le Tab in Javascript

Manipolare il DOM: Usare le Tab in Javascript

Mostra in maniere dinamica tutti i servizi di un centro sportivo

javascript

Informazioni aggiuntive

Livello: Principiante

239 lezioni

25 ore di videocorso

11 Progetti pratici

558 studenti iscritti

Voto Medio:

4.5

Prezzo originale: 29.90€

Supporto Premium

text

Scopri il corso completo

Corso di Javascript e Typescript...


558

4.5

Copertina
Corso di Javascript e Types...