JQuery modal window - para saan ito at kung paano ito i-install

Talaan ng mga Nilalaman:

JQuery modal window - para saan ito at kung paano ito i-install
JQuery modal window - para saan ito at kung paano ito i-install
Anonim

Upang mahanap ang sagot sa iyong tanong, minsan kailangan mong gumugol ng maraming oras, lalo na kung, pagdating sa disenyo ng web, ang isang taong hindi gaanong bihasa sa mga ganitong bagay ay nagpasyang lumikha ng isang site sa sarili niya. Ang isang jquery modal window ay maaaring maging isang napakahirap na gawain.

Makakakita ka ng maraming ganoong window sa Internet. Mukhang kailangan mo lang kopyahin ang mga ito at i-paste ang mga ito sa iyong site … Gayunpaman, hindi lahat ay napakasimple. Tulad ng swerte, mayroong ilang mga detalye na nagpapabagal sa lahat, at imposibleng malutas ang gawain, dahil walang kinakailangang kaalaman para dito. Samakatuwid, sa halip na i-bully agad ang isang modal window sa jQuery na may maraming kawili-wiling feature na mahirap ipatupad, mas mabuting magsimula sa isang maliit, pinakasimpleng modal window nang walang anumang hindi kinakailangang problema.

Kung mayroong isang blog sa isang lugar sa wordpress, kung gayon ang lahat ay napaka-simple, at kadalasan ay walang mga paghihirap, dahil mayroon na itong maraming handa na mga solusyon - iba't ibang mga pop-up na module. Ngunit mayroon ding ganap na magkakaibang mga pagpipilian kung saan kailangan mong "mag-sculpt" ng isang modal window sa iyong sarili o bumaling sa mga bayad na serbisyo ng mga espesyalista. Tulad ng alam mo, walang gustong magbayad, lalo na kapag tila kailangan mo lang na makarating sa ilalim ng bagay, at ang lahat ay magiging mabilis atganap na libre.

Kinakailangan ang isang jquery modal window para magpakita ng content na kasama ng impormasyon sa page at dagdagan ito.

jQuery - ano ito?

Para sa kumpletong pag-unawa, kung hindi alam ng isang tao, kung gayon ang jquery ay isang JavaScript library, at ang huli, naman, ay nangangahulugang isang piraso ng code na naka-embed sa code ng isang web page at nagbibigay-daan sa iyong makamit iba't ibang mga epekto na hindi maaaring ipatupad sa loob ng HTML at CSS. Ang karaniwang halimbawa ng naturang piraso ng code ay ang kasalukuyang petsa o oras na ipinapakita sa page.

Ang mga developer ng library ay may opisyal na website, na patuloy na pinapabuti at ina-update, na may kaugnayan kung saan mayroong lahat ng mga bagong bersyon na nag-aalok ng mga bagong aklatan.

Upang sabihin sa jquery na kailangan mo ito o ang effect na iyon, mayroong CSS na wika na may mga style sheet.

CSS language

Ang ibig sabihin ng CSS ay Cascading Style Sheets. Imposible na ngayong makahanap ng site sa Internet na hindi gumagamit ng wikang ito.

Kaya, sa mga modal windows, ang jquery at CSS ay halos kailangan at kailangang-kailangan. Samakatuwid, kung hindi kasama ang jquery, kailangan mong gawin ito.

Para gawin ito, ipinapasok ang sumusunod sa loob ng head tag:

jQuery
jQuery

Para saan ang mga modals?

Ang isang simpleng jquery modal na lumalabas kapag nag-load ang site ay maaaring maging kapaki-pakinabang para sa pagkuha ng mas maraming tagasunod. Lilitaw ang window kapag nagbukas ang pahina. Ito ay hindi masyadong nakakagambala at malamang na hindi matakot sa sinuman, dahil sa kaunting kakulangan sa ginhawa ay madalingmagsasara, at magkakaroon ng cookies ang close button, at kapag na-click mo ito, hindi na lalabas muli ang nawala na modal window.

Pop-up window

Ang jquery popup window na isang beses lang lumalabas sa bawat page ay isang variation ng modal window.

Para maipatupad ito, ilang hakbang ang dapat gawin.

Maaari kang gumamit ng mga espesyal na plugin para sa mga modal window. Pinakamainam na i-download ang mga ito mula sa mga site ng developer tulad ng arcticModal. Kumokonekta ito bilang sumusunod:

jQuery modal window
jQuery modal window

Walang window styling, magiging ganito ang hitsura ng isa sa mga karaniwang tema ng plugin:

jQuery simpleng modal window
jQuery simpleng modal window

Susunod, nakakonekta ang cookie plugin:

jQuery modal window
jQuery modal window

Pagsusulat ng HTML code na nagbibigay ng impormasyon para sa user:

jQuery modal window
jQuery modal window

Ang arctimonial-close class na tinukoy sa code ay nangangahulugan na ang jQuery modal window ay magsasara kasama nito.

Sunod ang huling script:

jQuery popup modal
jQuery popup modal

Ang ilan sa mga parameter na ginamit ay nangangahulugan ng sumusunod:

closeOnOverClick: tutukuyin kung magsasara ang window kapag na-click ang overlay.

CloseOn Esc: nangangahulugan ng pag-click sa Esc.

Mag-e-expire: Tinutukoy ang oras kung kailan iimbak ang cookie. Sa iminungkahing bersyon, ang oras na ito ay magiging animnapung araw, iyon ay, ang window ay hindi ipapakita sa loob ng dalawang buwan. Ina-update ang cookie sa bawat pagbisita.

Pag-aaral kung paano mag-install sa iyongjQuery modal window sa site, maaari kang lumipat sa mas kumplikadong mga opsyon kung kinakailangan. Para dito, nagdaragdag ng iba't ibang istilo ng CSS, at magiging ganap na iba ang window sa mga modal window sa ibang mga site.

Fantasy at imahinasyon ay makakatulong upang makabuluhang madagdagan ang bilang ng mga subscriber salamat sa mga naturang solusyon, at ang mahusay na pagpasok ng mga modal window sa mga online na tindahan ay maaaring magpalaki ng mga benta nang maraming beses. Samakatuwid, ang oras na ginugol sa pagprograma at pag-install ng mga bintana ay mabibigyang-katwiran at tiyak na magbubunga!

Mga uri ng modal window

Ang Modal na mga window ay maaaring pop-up kapag nag-click ka sa kaukulang button o na-load kasama ng page at agad na lumabas sa pag-load. Maaaring hindi na lumitaw ang mga ito sa pagsasara para sa isang yugto ng panahon kung nakatakda ang isang cookie, tulad ng sa halimbawang inilarawan sa itaas, o maaaring lumitaw ang mga ito sa tuwing na-load ang page. May mga modal window na naayos sa isang lugar at nananatili dito, sa kabila ng mga paggalaw sa pahina, at maaaring maging dynamic kapag ang window ay naglalaman ng impormasyon na may link, at ang user ay dumaan dito. Pagkatapos ay ang window lang ang ia-update, habang ang orihinal na page ay nananatiling hindi nagbabago.

Inirerekumendang: