Miten jQueryn avulla luodaan modaalinen ponnahdusikkuna, kun sitä napsautetaan

Miten jQueryn avulla luodaan modaalinen ponnahdusikkuna, kun sitä napsautetaan

Modaalinen laatikko on ponnahdusikkuna, joka pakottaa käyttäjän toimimaan vuorovaikutuksessa sen kanssa, ennen kuin hän palaa sivustolle. Modaaliset laatikot ovat käyttökelpoisia varoituksille, informaatiolaatikoille ja muille. Voit luoda modaalisen laatikon jQueryn avulla. Jos jQuery ei ole sinulle tuttu, tutustu jQueryn perusteet -artikkeliin, jossa selitetään, miten jQuery toimii.

Tämä on interaktiivinen koodinäyttö, joka näyttää HTML:n, CSS:n, jQueryn ja demon tulosteen.

Modaalinen HTML

Luodaksesi modaalisen ponnahdusikkunan sinun on ensin luotava HTML-rakenne.

Ponnahdusikkunan päällekkäisyydelle ja sisällölle on luotava luokat, jotta voit muokata niitä erillään muusta dokumentista.

Tässä esimerkissä luodaan ”popup-overlay”- ja ”popup-content”-luokat, jotta CSS:llä voidaan tyylitellä nimenomaan sitä.

Huomioi tässä esimerkissä olevat painikeelementit. Lisäsimme painikkeet, joiden haluamme käynnistävän ponnahdusikkunan. Yhdelle painikkeelle on annettu luokka ”open”, kun taas toiselle on annettu luokka ”close”. Näitä käytetään myöhemmin ponnahdusikkunan avaamiseen ja sulkemiseen.

Modaalin CSS

CSS:ssä sinun on muotoiltava luokat ”popup-overlay” ja ”popup-content” niin, että ne ovat aluksi piilossa. Ponnahdusikkuna ei olisi ponnahdusikkuna, jos se olisi alusta alkaen näkyvissä. Voimme piilottaa ponnahdusikkunan muuttamalla luokkien näkyvyyttä:

.popup-overlay {visibility:hidden;}.popup-content {visibility:hidden;}

Nyt emme halua ponnahdusikkunan pysyvän piilossa ikuisesti, joten meidän on tehtävä CSS:ssä erityinen käyttötapaus sille, milloin ponnahdusikkunan pitäisi näkyä. Käytämme jQuerya apuna sen määrittämisessä, milloin ponnahdusikkunan pitäisi olla näkyvissä.

JQuery pystyy lisäämään ja poistamaan luokkia toimintojen (kuten klikkauksen) perusteella. Jos siis ohjelmoimme jQueryn lisäämään luokan ”active”, kun ”open”-painiketta napsautetaan, voimme käyttää ”active”-luokkaa CSS:ssä ponnahdusikkunan näyttämiseen. Liitä ”active”-luokka ponnahdusikkunaluokkiin ja luo uusi muotoilu sille, kun ponnahdusikkuna on näkyvissä.

Katso alla olevasta esimerkistä, miltä tämän CSS-muotoilun pitäisi näyttää:

.popup-overlay.active{visibility:visible;}.popup-content.active {visibility:visible;}

Modaalinen jQuery

Nyt on aika lisätä jQuery. Muista määrittää HTML-dokumenttisi jQuerya varten ennen jQuery-koodin lisäämistä. Jos et ole varma, miten se tehdään, katso artikkeli Getting Your HTML Ready for jQuery for jQuery.

Kun ”Avaa” ja ”Sulje” HTML-painikkeita napsautetaan, jQueryn on lisättävä tai poistettava luokka ”active”.

Tämä ensimmäinen lauseke lisää ”active”-luokan, kun ”Open”-painiketta napsautetaan.

$(".open").on("click", function(){$(".popup, .popup-content").addClass("active");});

Tällöin ”active”-luokka liitetään ponnahdusikkunan luokkiin, jolloin ponnahdusikkunan näkyvyys muuttuu ”näkyväksi”. Toisin sanoen ponnahdusikkuna tulee näkyviin.

Tämä toinen lauseke poistaa ”aktiivinen”-luokan, kun ”Sulje”-painiketta napsautetaan.

$(".close, .popup").on("click", function(){$(".popup, .popup-content").removeClass("active");});

Kun tämä tapahtuu, ”aktiivinen”-luokka poistetaan ponnahdusikkunaluokista, jolloin ne palaavat aiempaan muotoiluunsa, jossa näkyvyydeksi on määritetty ”piilotettu” (hidden).

Lisää dokumenttiisi kumpikin jQueryn lauseke. Jos kaikki tämä on suoritettu oikein, sinulla on alkeellinen modaalinen ponnahdusikkuna.