JQuery modalinis langas – kam jis skirtas ir kaip jį įdiegti

Turinys:

JQuery modalinis langas – kam jis skirtas ir kaip jį įdiegti
JQuery modalinis langas – kam jis skirtas ir kaip jį įdiegti
Anonim

Kad rastumėte atsakymą į savo klausimą, kartais tenka sugaišti daug laiko, ypač jei kalbant apie interneto dizainą, svetainę nusprendė sukurti nelabai išmanantis žmogus. pats. „jquery“modalinis langas gali būti viena iš tokių varginančių užduočių.

Tokių langų internete galite rasti labai daug. Atrodo, kad tereikia juos nukopijuoti ir įklijuoti į savo svetainę… Tačiau ne viskas taip paprasta. Kaip pasisektų, yra kažkokia smulkmena, kuri viską pristabdo, o užduoties išspręsti neįmanoma, nes nėra tam reikalingų žinių. Todėl, užuot iš karto suvaržę modalinį langą sistemoje „jQuery“su daug įdomių funkcijų, kurias sunku įgyvendinti, geriau pradėti nuo mažo, paprasčiausio modalinio lango be jokių nereikalingų rūpesčių.

Jei kažkur WordPress yra tinklaraštis, tada viskas labai paprasta ir paprastai nekyla jokių sunkumų, nes jame jau yra daug paruoštų sprendimų - įvairių iššokančių modulių. Tačiau yra ir visiškai kitokių variantų, kai modalinį langą tenka „sulipdyti“pačiam arba kreiptis į mokamas specialistų paslaugas. Kaip žinia, niekas nenori mokėti, ypač kai atrodo, kad tereikia įsigilinti į reikalo esmę, ir viskas gana greitai išsispręs irvisiškai nemokama.

Jquery modalinis langas reikalingas turiniui, kuris yra kartu su informacija puslapyje ir ją papildo, rodyti.

jUžklausa – kas tai?

Jei kas nors nežino, jquery yra „JavaScript“biblioteka, o pastaroji, savo ruožtu, reiškia kodo dalį, įterptą į tinklalapio kodą ir leidžiančią pasiekti skirtingi efektai, kurių negalima įdiegti HTML ir CSS. Tipiškas tokio kodo pavyzdys būtų dabartinė data arba laikas, rodomas puslapyje.

Bibliotekos kūrėjai turi oficialią svetainę, kuri nuolat tobulinama ir atnaujinama, su kuria susijusios visos naujos versijos, siūlančios naujas bibliotekas.

Norėdami pasakyti jquery, kad jums reikia šio ar kito efekto, yra CSS kalba su stiliaus lapais.

CSS kalba

CSS reiškia pakopinius stiliaus lapus. Dabar internete neįmanoma rasti svetainės, kurioje nebūtų vartojama ši kalba.

Todėl modaliniuose languose jquery ir CSS yra beveik būtini ir būtini. Todėl, jei jquery neįtrauktas, turite tai padaryti.

Norėdami tai padaryti, į head head įterpkite:

jQuery
jQuery

Kam skirti modalai?

Paprastas jquery modalas, kuris pasirodo įkeliant svetainę, gali būti naudingas norint sulaukti daugiau stebėtojų. Atidarius puslapį, pasirodys langas. Tai labai neblaško dėmesio ir vargu ar ką nors išgąsdins, nes esant menkiausiam diskomfortui, lengvaužsidaro, o uždarymo mygtukas turės slapukus, o kai jį spustelėsite, dingęs modalinis langas daugiau nepasirodys.

Iššokantis langas

Jquery iššokantis langas, kuris pasirodo tik vieną kartą puslapyje, yra modalinių langų variantas.

Norint tai įgyvendinti, reikia atlikti keletą veiksmų.

Modaliniams langams galite naudoti specialius papildinius. Geriausia juos atsisiųsti iš kūrėjų svetainių, tokių kaip arcticModal. Jis jungiasi taip:

jQuery modalinis langas
jQuery modalinis langas

Be lango stiliaus viena iš standartinių papildinio temų atrodys taip:

jQuery paprastas modalinis langas
jQuery paprastas modalinis langas

Toliau prijungiamas slapukų papildinys:

jQuery modalinis langas
jQuery modalinis langas

Rašyti HTML kodą, teikiantį informaciją vartotojui:

jQuery modalinis langas
jQuery modalinis langas

Kode nurodyta arctimonial-close klasė reiškia, kad jQuery modalinis langas bus uždarytas kartu su ja.

Kitas ateina galutinis scenarijus:

jQuery iššokantis modalas
jQuery iššokantis modalas

Kai kurie naudojami parametrai reiškia:

closeOnOverClick: nustatys, ar langas užsidaro spustelėjus perdangą.

CloseOn Esc: reiškia spustelėti Esc.

Galiojimo laikas: nurodo laiką, kurį slapukas bus saugomas. Siūlomoje versijoje šis laikas bus šešiasdešimt dienų, tai yra, langas nebus rodomas du mėnesius. Slapukas atnaujinamas kiekvieno apsilankymo metu.

Mokymasis įdiegti savojQuery modalinis langas svetainėje, jei reikia, galite pereiti prie sudėtingesnių parinkčių. Tam pridedami įvairūs CSS stiliai ir langas visiškai skirsis nuo modalinių langų kitose svetainėse.

Fantazija ir vaizduotė padės ženkliai padidinti abonentų skaičių tokių sprendimų dėka, o meistriškai įterpti modaliniai langai internetinėse parduotuvėse gali kelis kartus padidinti pardavimus. Todėl laikas, skirtas langų programavimui ir diegimui, pasiteisins ir tikrai atsipirks!

Modalinių langų tipai

Modaliniai langai gali būti iššokantys, kai spustelite atitinkamą mygtuką arba įkeliami kartu su puslapiu ir iškart įkeliami. Jie gali neberodyti uždarius tam tikrą laiką, jei nustatytas slapukas, kaip nurodyta aukščiau aprašytame pavyzdyje, arba jie gali būti rodomi kiekvieną kartą įkeliant puslapį. Yra modaliniai langai, kurie fiksuojami vienoje vietoje ir lieka joje, nepaisant judesių puslapyje, ir gali būti dinamiški, kai lange yra informacija su nuoroda, o vartotojas per ją praeina. Tada bus atnaujintas tik langas, o pradinis puslapis išliks nepakitęs.

Rekomenduojamas: