JQuery modaaliikkuna - mihin se on tarkoitettu ja miten se asennetaan

Sisällysluettelo:

JQuery modaaliikkuna - mihin se on tarkoitettu ja miten se asennetaan
JQuery modaaliikkuna - mihin se on tarkoitettu ja miten se asennetaan
Anonim

Jos saat vastauksen kysymykseesi, sinun on joskus käytettävä paljon aikaa, varsinkin jos web-suunnittelun suhteen henkilö, joka ei ole erityisen perehtynyt tällaisiin asioihin, on päättänyt luoda sivuston omillaan. Jquery-modaaliikkuna voi olla yksi tällainen tuskallinen tehtävä.

Löydät paljon tällaisia ikkunoita Internetistä. Näyttää siltä, että sinun tarvitsee vain kopioida ne ja liittää ne sivustollesi … Kaikki ei kuitenkaan ole niin yksinkertaista. Kuten onni, jokin yksityiskohta hidastaa kaikkea, ja tehtävää on mahdotonta ratkaista, koska siihen ei ole tarvittavaa tietoa. Sen sijaan, että jQueryn modaaliikkunaa kiusattaisiin välittömästi monilla mielenkiintoisilla ominaisuuksilla, joita on vaikea toteuttaa, on parempi aloittaa pienestä, yksinkertaisimmasta modaaliikkunasta ilman turhia ongelmia.

Jos jossain wordpressissä on blogi, niin kaikki on hyvin yksinkertaista, eikä yleensä ole vaikeuksia, koska sillä on jo monia valmiita ratkaisuja - erilaisia ponnahdusikkunoita. Mutta on myös täysin erilaisia vaihtoehtoja, joissa joudut "veistämään" modaaliikkunan itse tai kääntymään asiantuntijoiden maksullisiin palveluihin. Kuten tiedät, kukaan ei halua maksaa, varsinkin kun näyttää siltä, että sinun on vain päästävä asian ytimeen, ja kaikki selviää melko nopeasti jatäysin ilmainen.

Jquery-modaaliikkuna tarvitaan näyttämään sisältöä, joka menee sivun tietojen rinnalle ja täydentää sitä.

jQuery – mikä se on?

Jos joku ei tiedä, jquery on JavaScript-kirjasto, ja jälkimmäinen puolestaan tarkoittaa koodinpätkää, joka on upotettu verkkosivun koodiin ja jonka avulla voit saavuttaa erilaisia tehosteita, joita ei voida toteuttaa HTML:ssä ja CSS:ssä. Tyypillinen esimerkki tällaisesta koodinpätkästä olisi sivulla näkyvä nykyinen päivämäärä tai aika.

Kirjaston kehittäjillä on viralliset verkkosivut, joita jatkuvasti parannetaan ja päivitetään, joiden yhteydessä on kaikki uudet versiot, jotka tarjoavat uusia kirjastoja.

Jos haluat kertoa jquerylle, että tarvitset tämän tai toisen tehosteen, on olemassa CSS-kieli tyylisivuilla.

CSS-kieli

CSS tarkoittaa CSS-tyylisivuja. Nyt on mahdotonta löytää Internetistä sivustoa, joka ei käyttäisi tätä kieltä.

Siksi modaaliikkunoissa jquery ja CSS ovat lähes välttämättömiä ja välttämättömiä. Siksi, jos jqueryä ei ole mukana, sinun on tehtävä tämä.

Tämä tehdään lisäämällä head-tunnisteen sisään seuraava:

jQuery
jQuery

Mille modaalit ovat?

Yksinkertainen jquery-modaali, joka tulee näkyviin, kun sivusto latautuu, voi olla hyödyllinen seuraajien saamisessa. Ikkuna tulee näkyviin, kun sivu avautuu. Se ei ole kovin häiritsevää eikä todennäköisesti pelota ketään, koska pienimmälläkin epämukavuudella se on helpposulkeutuu ja sulje-painikkeessa on evästeet, ja kun napsautat sitä, kadonnut modaaliikkuna ei avaudu uudelleen.

Ponnahdusikkuna

Jquery-ponnahdusikkuna, joka näkyy vain kerran sivulla, on modaaliikkunoiden muunnelma.

Sen toteuttamiseksi on suoritettava useita vaiheita.

Voit käyttää erityisiä laajennuksia modaaliikkunoihin. On parasta ladata ne kehittäjäsivustoilta, kuten arcticModal. Se yhdistetään seuraavasti:

jQuery modaalinen ikkuna
jQuery modaalinen ikkuna

Ilman ikkunatyyliä yksi tavallisista laajennusteemoista näyttää tältä:

jQuery yksinkertainen modaalinen ikkuna
jQuery yksinkertainen modaalinen ikkuna

Seuraavaksi evästelaajennus liitetään:

jQuery modaalinen ikkuna
jQuery modaalinen ikkuna

Kirjoita HTML-koodi, joka antaa tietoja käyttäjälle:

jQuery modaalinen ikkuna
jQuery modaalinen ikkuna

Koodissa määritetty arctimonial-close-luokka tarkoittaa, että jQuery-modaaliikkuna sulkeutuu sen mukana.

Seuraavaksi tulee lopullinen käsikirjoitus:

jQuery popup modaali
jQuery popup modaali

Jotkin käytetyistä parametreista tarkoittavat seuraavaa:

closeOnOverClick: määrittää, sulkeutuuko ikkuna, kun peittokuvaa napsautetaan.

CloseOn Esc: tarkoittaa Esc-painikkeen napsauttamista.

Vanhenee: Määrittää ajan, jonka eväste tallennetaan. Ehdotetussa versiossa tämä aika on kuusikymmentä päivää, eli ikkunaa ei näytetä kahteen kuukauteen. Eväste päivitetään jokaisella käynnillä.

Opi asentamaan tietokoneellesijQuery modaalinen ikkuna sivustolla, voit tarvittaessa siirtyä monimutkaisempiin vaihtoehtoihin. Tätä varten lisätään useita CSS-tyylejä, ja ikkunasta tulee täysin erilainen kuin muiden sivustojen modaaliset ikkunat.

Fantasia ja mielikuvitus auttavat kasvattamaan tilaajamäärää merkittävästi tällaisten ratkaisujen ansiosta, ja verkkokaupoissa taitavasti asetetut modaaliikkunat voivat kasvattaa myyntiä moninkertaisesti. Siksi ohjelmointiin ja ikkunoiden asentamiseen käytetty aika on perusteltua ja kannattaa ehdottomasti!

Modaaliikkunoiden tyypit

Modaaliset ikkunat voivat olla ponnahdusikkunoita, kun napsautat vastaavaa painiketta, tai ne voidaan ladata sivun mukana ja ilmestyä heti latauksen jälkeen. Ne eivät välttämättä enää näy sulkemisen yhteydessä tiettyyn aikaan, jos eväste on asetettu, kuten yllä kuvatussa esimerkissä, tai ne voivat näkyä aina, kun sivu ladataan. On modaaliikkunoita, jotka on kiinnitetty yhteen paikkaan ja pysyvät siinä sivun liikkeistä huolimatta ja voivat olla dynaamisia, kun ikkuna sisältää linkin sisältävää tietoa ja käyttäjä kulkee sen läpi. Sitten vain ikkuna päivitetään, mutta alkuperäinen sivu pysyy muuttumattomana.

Suositeltava: