Ponnahdusikkunat ovat kaikkialla verkossa, mutta ne eivät kaikki ole huonoja. Opi luomaan hyvin käyttäytyviä ponnahdusikkunoita tavallisilla verkkotekniikoilla.

Hyvin suunnitellut ponnahdusikkunat tekevät verkkosivustostasi interaktiivisemman ja nykyaikaisemman. Ne voivat luoda markkinoita ja lisätä yritysten myyntiä.

Voit luoda ponnahdusikkunoita HTML: llä, CSS: llä ja JavaScriptillä. Luo ja muotoile ponnahdusikkuna alusta alkaen seuraavan oppaan avulla. Se tekee verkkosivustostasi interaktiivisen ja luo mahtavia käyttökokemuksia.

Kirjoita HTML sisällön jäsentämiseksi

Kirjoita HTML-koodi, jossa on piilotettu modaalinen ikkuna, joka avautuu, kun napsautat painiketta. Tässä tapauksessa näet sanan merkityksen Hei! Ponnahdusikkunassa on otsikko ja sisältöä.

Välittömästi käynnistät modaaliikkunan, taustalle tulee epäselvä tehoste. Lisää luokat osioihin, joita käytät modaalin valitsemiseen myöhemmin JavaScriptissä.

<kehon>
<-painikettaluokkaa="avoin modaalinen">Hei!-painiketta>
<divluokkaa="modaalinen sisältö piilotettu-modaalinen">





instagram viewer


<divluokkaa="modaalinen otsikko">
<h3>Merkitys Hello!h3>
<-painikettaluokkaa="läheinen modaalinen">×-painiketta>
div>


<divluokkaa="modaalinen runko">
<s>Hello on englanninkielinen tervehdys. Sitä käytetään klo
 lauseen alku johdannossa joko henkilökohtaisesti tai
 puhelimessa.s>
div>
div>
<divluokkaa="blur-bg piilotettu-blur">div>
<käsikirjoitussrc="script.js">käsikirjoitus>
kehon>

Sivun pitäisi näyttää tältä:

Voit myös haluta tutkia HTML-dialogielementti jos haluat käyttää semanttisinta merkintää.

Kirjoita CSS lisätäksesi tyyliä

Käytä CSS: ää ponnahdusikkunan muotoiluun. Aseta ikkuna verkkosivun keskelle mustaa taustaa vasten, jotta se näkyy selvästi. Voit myös muokata ikkunan tyyliä, sen taustaa ja kirjasinkokoa.

Luo ensin yhtenäinen tyyli koko sivulle asettamalla marginaali, täyte ja rivin korkeus. Kohdista sitten runkoelementit keskelle takataustalle.

* {
marginaali: 0;
pehmuste: 0;
laatikon kokoinen: raja-laatikko;
viivankorkeus: 1;
}
kehon {
korkeus: 100%;
näyttö: flex;
perustele-sisältö: keskusta;
flex-suunta: sarakkeessa;
kohdista-kohteet: keskusta;
tausta: #000;
aukko: 30px;
}

Seuraavaksi tyyli avoin modaalinen -painiketta. Anna sille eri taustaväri kuin muualla sivulla, jotta se erottuu joukosta. Aseta myös fontin väri, koko, täyte ja siirtymäaika.

.open-modal {
tausta: #20c997;
väri: #F F F;
rajaa: ei mitään;
pehmuste: 20px 40px;
Fonttikoko: 48px;
raja-säde: 100px;
kohdistin: osoitin;
siirtyminen: kaikki 0.3s;
ääriviivat: ei mitään;
}
.open-modal: aktiivinen {
muuttaa: kääntääY(-17 kuvapistettä);
}

Tyyli sitten modaalinen sisältö, joka tulee näkyviin, kun ikkuna avautuu. Aseta valkoinen tausta, anna sille runkoa pienempi leveys ja lisää pehmusteet.

Anna sille myös z-indeksi, jotta se näkyy merkin edessä avoin modaalinen -painiketta. Aseta lisäksi piilo-modaalinen ei näy mitään, joten se pysyy piilossa, kunnes käynnistät sen.

.modal-sisältö {
tausta: #ccc;
leveys: 500px;
pehmuste: 20px;
raja-säde: 10px;
z-indeksi: 99;
}
.modal-header {
näyttö: flex;
perustele-sisältö: välilyönti;
marginaali-ala: 16px;
väri: #000;
Fonttikoko: 30px;
}


.modal-bodys { 
Fonttikoko: 22px;
viivankorkeus: 1.5; 
} 
.hidden-modal { 
näyttö: ei mitään; 
}

Sitten tyyli läheinen modaalinen painiketta läpinäkyvällä taustalla ja kohdista se keskelle.

.sulje-modaalinen {
tausta: läpinäkyvä;
rajaa: ei mitään;
näyttö: flex;
kohdista-kohteet: keskusta;
perustele-sisältö: keskusta;
korkeus: 20px;
leveys: 20px;
Fonttikoko: 40px;
}
.sulje-modaalinen:hover {
väri: #fa5252;
}

Muotoile lopuksi sumennuselementti, joka näkyy taustalla, kun ikkuna avautuu. Siinä on suurin korkeus ja leveys sekä taustasuodatin. Aseta sumennuksen arvoksi ei mitään, jotta se ei ole näkyvissä ennen kuin ikkuna avautuu.


.blur-bg {
asema: ehdoton;
alkuun: 0;
vasemmalle: 0;
korkeus: 100%;
leveys: 100%;
tausta: rgba(0, 0, 0, 0.3);
tausta-suodatin: hämärtää(5px);
}
.hidden-blur {
näyttö: ei mitään;
}

CSS: n lisäämisen jälkeen sivun pitäisi näyttää tältä:

Hallitse ponnahdusikkunaa JavaScript-koodilla

Käytät JavaScriptiä avataksesi ja sulkeaksesi modaaliikkunan näyttämällä tai piilottamalla sen. Lisätä tapahtuman kuulijoita painikkeeseen, jolloin se avautuu ja sulkeutuu, kun napsautat sitä.

Valitse ensin asiaankuuluvat elementit käyttämällä HTML-koodissa määrittämiäsi CSS-luokkia:

antaa modaalinen sisältö = asiakirja.querySelector(".modal-content");
antaa openModal = asiakirja.querySelector(".open-modal");
antaa closeModal = asiakirja.querySelector(".close-modal");
antaa blurBg = asiakirja.querySelector(".blur-bg");

Lisää tapahtumakuuntelija avoin modaalinen -painiketta, jotta se avaa ikkunan, kun napsautat sitä.

openModal.addEventListener("klikkaus", toiminto () {
 modalContent.classList.remove("piilotettu modaalinen");
 blurBg.classList.remove("piilotettu hämärä");
});

Suorita päinvastaiset toimet sulkeaksesi ponnahdusikkunan, mutta tällä kertaa kääri ne nimettyyn funktioon. Tämä käsittelee useiden tapahtumien käyttäytymistä, jotka voivat saada modaaliikkunan sulkeutumaan:

antaa closeModalFunction = toiminto () {
 modalContent.classList.add("piilotettu modaalinen")
 blurBg.classList.add("piilotettu hämärä")
}

Lisää tapahtumaseuraajat käsittelemään tausta- tai sulkemispainikkeen napsautuksia ja tapausta, jossa käyttäjä painaa Esc-näppäintä.

blurBg.addEventListener("klikkaus", closeModalFunction);
closeModal.addEventListener("klikkaus", closeModalFunction);
asiakirja.addEventListener("näppäimet", toiminto (tapahtuma) {
jos (tapahtuma.avain "Paeta"
 && !modalContent.classList.contains("piilotettu")
 ) {
 closeModalFunction();
 }
});

Nyt, kun napsautat Hei! -painiketta, modaali tulee näkyviin. Voit sulkea sen napsauttamalla ikkunan oikealla puolella olevaa peruutuspainiketta. Katso koodi päällä codepen.io ja olla vuorovaikutuksessa modaalin kanssa:

Ponnahdusikkunoiden käyttötavat

Ponnahdusikkunoiden / modaalisten ikkunoiden pääasiallinen käyttö verkkokehityksessä on keskittyä tiettyyn verkkosivuston kohteeseen. Kun se on käynnistetty, se deaktivoi muun sivun ja kehottaa käyttäjää kiinnittämään siihen huomiota.

Ponnahdusikkunat animoivat käyttöliittymääsi. He voivat varoittaa ja kiinnittää huomion käyttäjillesi verkkosivulla oleviin tärkeisiin tietoihin. Ikkunan poistamiseksi käyttäjän on suoritettava jonkinlainen toiminto. Tällä tavalla käyttäjä pääsee vuorovaikutukseen ikkunan kanssa ja saa halutun tiedon.