Så här använder du jQuery för att generera en modal popup-fönsterruta när du klickar
En modal ruta är ett popup-fönster som tvingar användaren att interagera med det innan han eller hon återvänder till webbplatsen. Modala rutor är användbara för varningar, informationsrutor med mera. Du kan skapa en modalbox med jQuery. Om du inte är bekant med jQuery kan du läsa vår artikel jQuery Basics för en förklaring av hur jQuery fungerar.
Det här är en interaktiv kodvisning som visar dig HTML, CSS, jQuery och en demo av resultatet.
Modal HTML
För att skapa en modal popup-fönsterruta måste du först upprätta HTML-strukturen.
Du måste skapa klasser för popup-överlägget och popup-innehållet så att du kan redigera dem separat från resten av dokumentet.
Det här exemplet skapar klasserna ”popup-overlay” och ”popup-content” för att möjliggöra att CSS kan styla det specifikt.
Tänk på knappelementen i det här exemplet. Vi har lagt till knappar som vi vill ska utlösa popupen. Den ena knappen har fått klassen ”open”, medan den andra har klassen ”close”. Dessa kommer att användas senare för att öppna och stänga popupen.
Modal CSS
I CSS:en måste du styla klasserna ”popup-overlay” och ”popup-content” så att de till en början är dolda. En popup skulle inte vara en popup om den var synlig från början. Vi kan dölja popupen genom att ändra klassernas synlighet:
.popup-overlay {visibility:hidden;}.popup-content {visibility:hidden;}
Om du har namngett dina klasser på annat sätt, se till att ersätta .popup-overlay och .popup-content med dina klassnamn.
Nu vill vi inte att popupen ska vara dold för alltid, så vi måste göra ett särskilt användningsfall i CSS för när popupen ska visas. Vi kommer att använda jQuery för att hjälpa till att avgöra när pop-upen ska vara synlig.
jQuery har förmågan att lägga till och ta bort klasser baserat på åtgärder (som att klicka). Så om vi programmerar jQuery så att den lägger till en klass som heter ”active” när man klickar på knappen ”open” kan vi använda klassen ”active” i CSS för att visa popup-fönstret. Lägg till klassen ”active” till popup-klasserna och skapa en ny styling för när popupen är synlig.
Se exemplet nedan för att se hur denna CSS-styling ska se ut:
.popup-overlay.active{visibility:visible;}.popup-content.active {visibility:visible;}
Modal jQuery
Nu är det dags att lägga till jQuery. Se till att ställa in HTML-dokumentet för jQuery innan du lägger till någon jQuery-kod. Om du är osäker på hur du ska göra, se vår artikel Getting Your HTML Ready for jQuery.
När HTML-knapparna ”Open” och ”Close” klickas på måste jQuery lägga till eller ta bort klassen ”active”.
Detta första uttalande lägger till klassen ”active” när knappen ”Open” klickas.
$(".open").on("click", function(){$(".popup, .popup-content").addClass("active");});
När detta händer läggs klassen ”active” till popup-klasserna, vilket ändrar popupens synlighet till ”visible”. Med andra ord visas popupen.
Detta andra uttalande tar bort klassen ”active” när man klickar på knappen ”Close”.
$(".close, .popup").on("click", function(){$(".popup, .popup-content").removeClass("active");});
När detta sker tas klassen ”active” bort från popup-klasserna, vilket gör att de återgår till sin tidigare styling där synligheten är inställd på hidden.
Lägg till båda uttalandena av jQuery i ditt dokument. Om allt detta är korrekt utfört har du en rudimentär modal popup-rutan.
jQuery är en programvara med öppen källkod som är tillåten under en MIT-licens. jQuery är inte en produkt från Pair Networks, Inc. och Pair Networks ger ingen garanti för jQuery. Observera att det finns många nivåer av javascriptbibliotek tillgängliga. Rådgör med din IT-specialist för att få råd och vägledning om ett lämpligt bibliotek. Den här specifika produkten kanske eller kanske inte uppfyller dina behov. Pair Networks, Inc. tillhandahåller stöd för denna handledning för din bekvämlighet och ansvarar inte för jQuerys prestanda. Läs noga igenom villkoren och omfattningen av tjänsterna för alla onlinetjänster eller produkter som du överväger att köpa eller använda.