Sådan bruger du jQuery til at generere en modal popup-boks, når der klikkes
En modalboks er et popup-vindue, der tvinger brugeren til at interagere med det, før han/hun vender tilbage til webstedet. Modale bokse er nyttige til advarsler, informationsbokse og meget mere. Du kan oprette en modalboks med jQuery. Hvis du ikke er bekendt med jQuery, kan du læse vores artikel jQuery Basics for at få en forklaring på, hvordan jQuery fungerer.
Dette er en interaktiv kodedisplay, der viser dig HTML, CSS, jQuery og en demo af output.
Modal HTML
For at oprette en modal pop-up skal du først etablere HTML-strukturen.
Du skal oprette klasser til pop-up-overlayet og pop-up-indholdet, så du kan redigere dem separat fra resten af dokumentet.
Dette eksempel opretter klasserne “popup-overlay” og “popup-content” for at gøre det muligt for CSS at style det specifikt.
Læg mærke til knapelementerne i dette eksempel. Vi har tilføjet knapper, som vi ønsker at udløse pop-up’en. Den ene knap har fået klassen “open”, mens den anden har klassen “close”. Disse vil senere blive brugt til at åbne og lukke pop-up’en.
Modal CSS
I CSS’en skal du style klasserne “popup-overlay” og “popup-content”, så de i første omgang er skjulte. En popup ville ikke være en popup, hvis den var synlig fra starten. Vi kan skjule pop-up’en ved at ændre klassernes synlighed:
.popup-overlay {visibility:hidden;}.popup-content {visibility:hidden;}
Hvis du har navngivet dine klasser anderledes, skal du sørge for at erstatte .popup-overlay og .popup-content med dine klassebetegnelser.
Nu vil vi ikke have, at pop-up’en skal være skjult for evigt, så vi skal lave en særlig use case i CSS’en for, hvornår pop-up’en skal vises. Vi skal bruge jQuery til at hjælpe med at bestemme, hvornår pop-up’en skal være synlig.
jQuery har evnen til at tilføje og fjerne klasser baseret på handlinger (f.eks. klik). Så hvis vi programmerer jQuery til at tilføje en klasse kaldet “active”, når der klikkes på “open”-knappen, kan vi bruge “active”-klassen i CSS til at vise pop-up’en. Tilføj klassen “active” til pop-up-klasserne, og opret en ny styling for, hvornår pop-up’en er synlig.
Se eksemplet nedenfor for at se, hvordan denne CSS-styling skal se ud:
.popup-overlay.active{visibility:visible;}.popup-content.active {visibility:visible;}
Modal jQuery
Nu er det tid til at tilføje jQuery’en. Sørg for at konfigurere dit HTML-dokument til jQuery, før du tilføjer jQuery-kode. Hvis du er usikker på, hvordan du gør det, kan du se vores artikel Få din HTML klar til jQuery.
Så når der klikkes på HTML-knapperne “Open” og “Close”, skal jQuery tilføje eller fjerne klassen “active”.
Denne første erklæring tilføjer klassen “active”, når der klikkes på knappen “Open”.
$(".open").on("click", function(){$(".popup, .popup-content").addClass("active");});
Når dette sker, tilføjes klassen “active” til pop-up-klasserne, hvorved pop-up’ens synlighed ændres til “visible”. Med andre ord vises pop-up’en.
Denne anden erklæring fjerner “active”-klassen, når der klikkes på knappen “Luk”.
$(".close, .popup").on("click", function(){$(".popup, .popup-content").removeClass("active");});
Når dette sker, fjernes “active”-klassen fra pop-up-klasserne, hvilket får dem til at vende tilbage til deres tidligere styling, hvor synligheden er indstillet til skjult.
Føj begge jQuery-erklæringer til dit dokument. Hvis alt dette er udført korrekt, har du en rudimentær modal popup-boks.
jQuery er en open source-software, der er tilladt under en MIT-licens. jQuery er ikke et produkt af Pair Networks, Inc. og Pair Networks yder ingen garanti for jQuery. Bemærk venligst, at der er mange niveauer af javascript-biblioteker til rådighed. Kontakt venligst din it-professionelle for at få råd og vejledning om et passende bibliotek. Dette specifikke produkt opfylder måske eller måske ikke dine behov. Pair Networks, Inc. yder support til denne vejledning for din bekvemmelighed og er ikke ansvarlig for jQuery’s ydeevne. Læs venligst omhyggeligt vilkårene og omfanget af tjenesterne for enhver onlinetjeneste eller ethvert onlineprodukt, som du overvejer at købe eller bruge.