Saidi otsingukast on veebilehe üks olulisemaid kasutajaliidese elemente. Selle abil saab kasutaja teie saidilt soovitud sisu leida.

Sellest õpetusest saate teada, kuidas luua HTML5 abil otsingukasti märgistust ning kuidas kujundada vormielemente CSS3 võimsust kasutades ilma skripte kasutamata.

1. HTML-i märgistus

Otsing

Element

on otsinguvormi konteiner, otsinguväli luuakse elemendi abil või , ja elemendi abil saab luua nupu andmete serverisse saatmiseks või .

Mis vahet sellel on alates ? Mõlemad väljad loovad üherealise tekstisisestusvälja, kuid type="search" lisati HTML5 standardile ja see on semantiline vihje brauseritele. Kõik brauserid peale Mozilla Firefox lisavad väljale selge risti. Selle eemaldamiseks saate muuta välja tüübiks type="text" .

Mis vahet sellel on alates

? Esimesel või teisel viisil loodud saatmisnuppude tegevuses pole vahet. Erinevus seisneb selles, et element on konteiner, nii et selle sisse saab paigutada muid elemente, näiteks pilte või ikoone.

Saate vormiväljadele teksti lisada kahel viisil.
1)
Kuvatava teksti värv on hall. Järgmiste reeglite abil saate määrata vihjeteksti mis tahes värvi, muuta välja stiili ja tausta. Neid valijaid ei saa ühendada üheks reegliks, vastasel juhul need ei tööta.

Sisend::-webkit-input-placeholder ( värv: #B6C0A5; fondi stiil: kaldkiri; taust: #E0EFCA; ) input:-moz-placeholder ( värv: #B6C0A5; fondi stiil: kaldkiri; taust: #E0EFCA; ) sisend:-ms-input-placeholder ( värv: #B6C0A5; fondi stiil: kaldkiri; taust: #E0EFCA; )

2)
Kuvatava teksti värv on must. Saate määrata oma värvi atribuudi värvi abil, näiteks:

Sisend (värv: valge; )

Ikoonide kuvamiseks ärge unustage lisada .

2. Ikoonnupuga otsinguväli

* (kasti suurus: ääris-kast;) vorm ( asend: suhteline; laius: 300 pikslit; veeris: 0 automaatne; ) sisend ( laius: 100%; kõrgus: 42 pikslit; polsterdus vasakule: 10 pikslit; ääris: 2 pikslit, ühtlane #7BA7AB ; äärise raadius: 5 pikslit; piirjoon: puudub; taust: #F9F0DA; värv: #9E9C9C; ) nupp (asend: absoluutne; ülemine: 0; parem: 0px; laius: 42px; kõrgus: 42px; ääris: puudub; taust: #7BA7AB; äärise raadius: 0 5px 5px 0; kursor: kursor; ) nupp:enne ( sisu: "\f002"; fondiperekond: FontAwesome; fondi suurus: 16 pikslit; värv: #F9F0DA; )

3. Otsinguväli, mille sees on nupp

* (kasti suurus: ääris-kast;) vorm ( asukoht: suhteline; laius: 300 pikslit; veeris: 0 auto 100%; kõrgus: 42px; taust: #F9F0DA; polsterdus vasakule: 15px; ) nupp (kõrgus: 26px; laius: 26px; asukoht: absoluutne; ülemine: 8px; parem: 8px; taust: #F15B42; kursor: kursor; ) nupp:enne ( sisu: "\f105"; fondiperekond: FontAwesome; värv: #F9F0DA; fondi suurus: 20 pikslit; fondi kaal: paks; )

4. Otsinguväli stiilis "tasane"

* (kasti suurus: ääris-kast;) vorm ( asend: suhteline; laius: 300 pikslit; veeris: 0 automaatne; taust: #A3D0C3; ) sisend, nupp ( ääris: puudub; kontuur: puudub; taust: läbipaistev; ) sisend ( laius: 100%; kõrgus: 42 pikslit; polsterdus vasakule: 15 pikslit; ) nupp ( kõrgus: 42 pikslit; laius: 42 pikslit; asukoht: absoluutne; ülemine: 0; parem: 0; kursor: kursor; ) nupp: enne ( sisu: "\f002"; fondiperekond: FontAwesome; fondi suurus: 16 pikslit; värv: #F9F0DA; )

5. Paksu alumise äärisega otsingukast

* (kasti suurus: ääris-kast;) vorm ( asukoht: suhteline; laius: 300 pikslit; veeris: 0 automaatne; taust: #F9F0DA; ääris-alumine: 4px tahke #be290e; ) sisend, nupp ( ääris: puudub; kontuur : puudub; taust: läbipaistev; ) sisend ( laius: 100%; kõrgus: 42 pikslit; polsterdus vasakule: 15 pikslit; ) nupp ( kõrgus: 42 pikslit; laius: 42 pikslit; asukoht: absoluutne; ülemine: 0; parem: 0; kursor: kursor; ) nupp:before ( sisu: "\f178"; fondiperekond: FontAwesome; fondi suurus: 20 pikslit; värv: #be290e; )

6. Otsinguväli muutuva äärise värviga

* (kasti suurus: ääris-kast;) vorm ( asend: suhteline; laius: 300 pikslit; veeris: 0 automaatne; ) sisend, nupp ( piirjoon: puudub; taust: läbipaistev; ) sisend ( laius: 100%; kõrgus: 42 pikslit ; polsterdus vasakpoolne: 15 pikslit; ääris: 3 pikslit ühtlane #F9F0DA; ) nupp ( ääris: puudub; kõrgus: 42 pikslit; laius: 42 pikslit; asukoht: absoluutne; ülemine: 0; parem: 0; kursor: kursor; ) nupp: enne ( sisu: "\f002"; fondiperekond: FontAwesome; fondi suurus: 16 pikslit; värv: #F9F0DA; ) input:focus (äärise värv: #311c24; )

7. Libisev otsingukast

Otsinguväli ilmub, kui klõpsate ikooni nupul.

* (kasti suurus: ääris-kast;) vorm ( asend: suhteline; laius: 300 pikslit; veeris: 0 automaatne; kõrgus: 42 pikslit; ) sisend ( kõrgus: 42 pikslit; laius: 0; polsterdus: 0 42 pikslit 0 15 pikslit; ääris: puudub; alumine ääris: 2 pikslit, läbipaistev; kontuur: puudub; taust: läbipaistev; üleminek: .4s cubic-bezier(0, 0,8, 0, 1); asukoht: absoluutne; ülemine: 0; parem: 0; z-indeks : 2; ) sisend:fookus (laius: 300 pikslit; z-indeks: 1; ääris-alumine: 2px ühtlane #F9F0DA; ) nupp ( taust: #683B4D; ääris: puudub; kõrgus: 42px; laius: 42px; asend: absoluutne ; ülemine: 0; parem: 0; kursor: kursor; ) nupp:enne ( sisu: "\f002"; fondiperekond: FontAwesome; fondi suurus: 16 pikslit; värv: #F9F0DA; )

8. Otsinguvälja suurendamine

* (box-sizing: border-box;) vorm ( laius: auto; float: right; margin-right: 30px; ) input ( laius: 250px; kõrgus: 42px; polster-left: 15px; border-radius: 42px; ääris: 2px tahke #324b4e; taust: #F9F0DA; piirjoon: puudub; asend: suhteline; üleminek: .3s lineaarne; ) sisend:fookus (laius: 300px; ) nupp (laius: 42px; kõrgus: 42px; taust: puudub; ääris: puudub; asukoht: absoluutne; ülemine: -2px; parem: 0; ) nupp:before( sisu: "\f002"; fondiperekond: FontAwesome; värv: #324b4e; )

Selles õpetuses loome rippmenüüst otsinguvormi, mis sobib ideaalselt mobiilseadmete liidese kujundusega. Elemendi juurutamiseks kasutatakse ainult CSS-i – ei mingit JavaScripti ega täiendavat märgistust. lihtne ja tõhus meetod kompaktse otsinguvormi rakendamiseks.

Eesmärk

Mobiilseadmetes loeb iga piksel. Vormi kuvamiseks vajaliku ruumi minimeerimiseks kuvatakse see algselt kompaktsel kujul ja sisendfookuse (:focus ) saamisel laiendatakse. Selline lähenemine võimaldab säästa ruumi muude liidese elementide ja sisu jaoks.

HTML märgistus

Vorm kasutab HTML5. Kood on väga lihtne:

Otsinguvormi vaikevaate lähtestamine Webkiti brauserites

Vaikimisi näeb Webkiti brauserites otsinguvorm välja järgmine:

Selleks, et otsinguvorm näeks välja nagu tavaline tekstisisestusväli, peate lisama järgmised stiilid:

Input ( -webkit-appearance: textfield; -webkit-box-sizing: content-box; font-family: inherit; font-size: 100%; ) input::-webkit-search-decoration, input::-webkit- Otsi-tühista-nupp (kuva: puudub; )

Meie otsinguvormi koostamine

Sisestusvälja tavaline laius on 55 pikslit ja see laieneb :fookuse olekus 130 piksliteni. Üleminekuomadust kasutatakse animatsiooni jaoks ja kasti varju kasutatakse säraefekti jaoks.

Sisend (taust: #ededed url(img/search-icon.png) kordumatu 9px keskpunkt; ääris: ühtlane 1px #ccc; polsterdus: 9px 10px 9px 32px; laius: 55px; /* Vaikimisi laius */ -webkit- border -raadius: 10em; -moz-border-radius: 10em; border-radius: 10em; -webkit-transition: kõik .5s; -moz-üleminek: kõik .5s; üleminek: kõik .5s; ) sisend:fookus ( laius : 130 pikslit; /* laius sisendi fookusega */ taustavärv: #fff; äärise värv: #6dcff6; -webkit-box-shadow: 0 0 5px rgba(109,207,246,.5); -moz-box- shadow: 0 0 5px rgba(109,207,246,.5); kasti vari: 0 0 5px rgba(109,207,246,.5); /* säraefekt */ )

Näide B

Näites B on otsinguvorm oluliselt minimeeritud – kuvatakse ainult ikoon ilma teksti täitmata. Pange tähele, et otsinguvälja polsterduse ja laiuse omadused on muutunud ümaraks nupuks. Atribuuti color:transparent kasutatakse teksti nähtamatuks muutmiseks.

#demo-b sisend ( laius: 15 pikslit; polster vasak: 10 pikslit; värv: läbipaistev; kursor: kursor; ) # demo-b input:hover ( taustavärv: #fff; ) #demo-b sisend:fookus ( laius : 130 pikslit; polster vasak: 32 pikslit; värv: #000; taustavärv: #fff; kursor: automaatne; )

Brauseri ühilduvus

Kirjeldatud meetod töötab kõigis suuremates brauserites: Chrome, Firefox, Safari ja IE8+. IE7 ja vanemates brauserites funktsionaalsus ei tööta :focus pseudoklassi ja otsinguvälja tüübi toe puudumise tõttu.

Kombineeritud aadressi- ja otsinguriba võimaldab teil otsida otsingumootoreid või sisestada leidmiseks veebiaadresse mida sa otsin veebist. Opera kasutab vaikimisi Google'i otsingumootorit.

Veebist otsimiseks tehke järgmist.

1. klõpsake nuppu Otsige või sisestage aadress valdkonnas.
2. Sisestage märksõnad selle kohta, mida soovite leida. Näiteks tippige filmid .
3. Klõpsake ühel kuvatavatest ennustava otsingu soovitustest või vajutage nuppu Sisenema.

Sisestamise ajal kuvatakse ennustavad otsingusoovitused. Kui soovite vaadata tulemusi mõnest teisest otsingumootorist, nagu Yahoo!, Amazon või Bing, klõpsake vastavat vahekaarti, mis kuvatakse ennustava otsingu soovituste kasti paremas alanurgas.

Kui teate juba lehe asukohta, tippige veebiaadress otse kombineeritud aadressi- ja otsinguribale ning vajutage sellele lehele navigeerimiseks sisestusklahvi. Näiteks tippige www.opera.com ja vajutage Opera tarkvara avalehele liikumiseks sisestusklahvi.

vaikeotsingumootor

Opera vaikeotsingumootor on Google, kuid võite eelistada otsida Ecosia, DuckDuckGo, Amazoni või Wikipedia abil. Vaikeotsingumootori muutmiseks tehke järgmist.

1. Minema Seaded.
2. Under otsingumootorid, valige rippmenüüst eelistatud otsingumootor.

Kohandatud otsingumootorid

Lisaks Opera vaikeotsingumootoritele saate seadistada kombineeritud aadressi ja otsinguriba, et saada tulemusi teistest otsingumootoritest. Selleks tehke järgmist.

1. Paremklõpsake (Maci puhul Ctrl + klõps) saidi otsinguribal ja valige Loo otsingumootor….
2. Määrake mootorile nimi ja märksõna.
3. Klõpsake Okei.

Loo kohandatud otsingumootor

Kohandatud otsingumootoris otsingu loomiseks tippige esmalt mootorile määratud märksõna, seejärel tühik ja seejärel sisestage päring.

Seadete lehel saate muuta märksõnu ning hallata või eemaldada otsingumootoreid. Selleks tehke järgmist.

1. Minema Seaded.
2. Under otsingumootorid, klõpsake nuppu Otsingumootori haldamine nuppu.

Otsige kohandatud otsingumootoriga

Kohandatud otsingumootori kasutamiseks otsingus tippige enne päringut märksõna ja seejärel tühik. Näiteks Bingil on märksõna "b". Bingiga otsimiseks tippige "b Mis on Idaho pealinn". Tulemused avanevad Bingi otsingutulemuste lehel.

Kohandatud otsingumootori valimisel on oluline tühik märksõna ja otsingupäringu vahel.

Muutke esiletõstetud teksti kontekstimenüüs otsingumootoreid

Opera otsingu hüpikakna tööriistaga saate esile tõsta veebilehel oleva teksti ja kasutada valitud teksti otsingupäringuna. Otsingu hüpikaken kasutab teie vaikeotsingumootorit. Siiski võite pärast otsingupäringu teksti esiletõstmist soovida tulemusi mõnest teisest mootorist.

Kontekstimenüü abil otsimiseks tõstke veebilehel esile mõni tekst ja paremklõpsake (või CTRL + klõps) valikul.

Hõljutage hüpikaknas kursorit üle Otsi koos, seejärel valige otsingumootor, mida soovite kasutada.

Otsingu tulemused avanevad uuel vahelehel.

Muutke kiirotsingus otsingumootoreid

Otsingu hüpikakna kasutamine:

1. Tõstke esile veebilehel olev tekst.
2. Esiletõstetud teksti kohal kuvatakse hüpikaken, sealhulgas valikud Otsing ja Kopeeri(ja jagada kui Macis). Kui valuuta, ühik või ajavöönd on esile tõstetud, kuvatakse hüpikaknas konverteeritud väärtus .
3. vali Otsing et esitada esiletõstetud tekstiga vaikeotsingumootori päring.
4. vali Kopeeri esiletõstetud teksti lõikelauale kopeerimiseks.
5. Kui hüpikaknas on teisendatud väärtus, klõpsake väärtusel selle lõikepuhvrisse kopeerimiseks.

Otsingu hüpikakna tööriista, sealhulgas kõigi selle funktsioonide keelamiseks tehke järgmist.

1. Minema Seaded.
2. Klõpsake Täpsemalt vasakpoolsel külgribal ja klõpsake nuppu Funktsioonid.
3. Under Otsingu hüpikaken, Lülita välja Lubage teksti valimisel otsingu hüpikaken.

Paljude inimeste jaoks on Internetist teabe otsimise efektiivsus just need jalad, mis hunti toidavad. Kust leida ajakohast ja ajakohast teavet? Kust osta odavamalt ja müüa kallimalt? Kust leida kõige täpsemaid juhiseid teatud ülesannete täitmiseks? Kust saab Internetis filme vaadata? Nendele ja sarnastele kasutajate küsimustele võimalikult õigesti vastamiseks täiustavad otsingumootorid aasta-aastalt juba niigi keerukaid mehhanisme saitide esitamiseks otsingutulemustes konkreetsete kasutajapäringute korral. Otsingumootorite eesmärk on viia inimesed parimale võimalikule saidile, et saada vastused oma küsimustele.

Lisaks otsingumootoritele on otsingumootorid ise varustatud otsingufiltritega, et iga kasutaja saaks kitsendada teabeotsingu ulatust või täpsustada oma päringut.

Mõelge allpool mõnele otsingulaiendile, mida saab populaarsetele brauseritele lisada ja mille tulemusel suurendada Internetist teabe otsimise tõhusust.

Google Chrome'i otsingulaiendid

Otsige praeguselt saidilt

Mitte iga sait pole varustatud sisemise otsingumootoriga ja sellistel ressurssidel peate konkreetse teabe otsimiseks pikka aega jaotisest jaotisesse jooksma. Saidil otsimiseks mõeldud brauserilaiend on universaalne tööriist, mis on alati käepärast, olenemata sellest, millisele saidile jõuate. Saidil vajaliku teabe leidmiseks pole vaja muud teha, kui sisestada võtmepäring väikesele otsinguväljale, mis kuvatakse brauseri paneelil laiendusnupul klõpsamisel.

Otsingumootori otsingutulemused avanevad uuel brauseri vahekaardil ja neis valitakse konkreetse saidi lehed, kus märksõna esineb.

Praeguse saidi otsimine on manustatud eelinstallitud Google'i otsingumootoriga, kuid laienduse parameetrites saate määrata teise otsingumootori - Yandex, Yahoo või Bing. Selleks helistage laiendusnupu kontekstimenüüsse ja valige käsk "Parameetrid".

Laiendusvalikud avanevad uuel brauseri vahekaardil, kus saame valida teise otsingumootori. Ja juba hakkab ta sellel saidil otsima.

Alternatiivne Google'i otsing

Yandexi otsingumootor pakub algselt võimalust otsida teavet kahest teisest otsingumootorist – Google’ist ja Bingist – ühe klõpsuga, kuigi lingid nendele otsingumootoritele minemiseks koos sisestatud võtmepäringuga asuvad lehe allosas. otsingutulemuste lehel.

Google on aga selles osas isekas – tema otsingutulemustes pole konkureerivatest otsingumootoritest juttugi. Saate selle olukorra parandada, rakendades Google Chrome'is Google Chrome'i alternatiivse otsingu laienduse.

Selle asemel, et pidevalt tippida iga kord torrenti jälgijate otsingutulemuste saamiseks märksõna "torrent" lisa, on lihtsam installida nendel eesmärkidel spetsiaalne laiendus TMS (Torrents MultiSearch).

Laiendusnupp on manustatud brauseri tööriistaribale ja sellele klõpsates avaneb päringu sisestamiseks väike otsinguväli.

Otsingutulemused kuvatakse eraldi vahekaardil ja see on sisu, mida leitakse ainult Runeti torrentijälgijates, mitte warez-saitidel, tarkvara- ja meediaportaalidel ega ametlikel saitidel.

Torrenti jälgijate otsingutulemustes saab leitud sisu filtreerida faili suuruse või üleslaadimise kuupäeva järgi. Otsingu kitsendamiseks saate määrata täiendavaid märksõnu.

Otsingutulemusi saab vaadata ka eraldi konkreetsete torrentijälgijate ja eraldi sisutüüpide (nt filmid, muusika, tarkvara) kohta.

Lisaks on TMS-laiendus põimitud brauseri kontekstimenüüsse, et saaksid ilma liigse kopeerimise ja kleepimiseta torrentijälgijate otsingusse saata mis tahes Interneti-lehtedel esiletõstetud sõna või fraasi.

Konteksti otsing

Google Chrome on juurutanud kontekstuaalse otsingufunktsiooni, kasutades ühte vaikebrauserisse installitud otsingumootorit. Otsingumootorite arvu suurendamiseks, mille abil saate saitide lehtedel mis tahes valitud sõna otsida, on ette nähtud laiend "Kontekstiotsing".

Laiendusel on esialgu võimalus otsida populaarseimast torrentijälgijast RuTracker, Wikipediast ja meediaportaalist Kinopoisk.Ru.

Muud otsingumootorid, et nende kaudu oleks võimalik otsida infot otse brauseri kontekstimenüüst, lisatakse laienduse parameetritesse. Avage Google Chrome'i menüü, valige "Seaded" ja minge brauserisse installitud laienduste jaotisesse.

Valige laienduste loendist see, mida vajame - "Kontekstiotsing". Klõpsake linki "Seaded".

Opera otsingulaiendid

Otsige saidilt

Laiendusnupp asub brauseri tööriistaribal ja sellel klõpsates saate avada võtmepäringu sisestamiseks otsinguvälja ja muuta otsingumootorit.

Eelinstallitud Yandexi ja Google'i laiendusseadetes saab täiendada teiste otsingumootoritega. Helistage laiendusnupu kontekstimenüüsse ja valige käsk "Seaded".

Samamoodi nagu Google Chrome'i kontekstiotsingu laienduse puhul, peate uue otsingumootori lisamiseks sisestama selle URL-i stringi.

Torrentide MultiSearch

Sarnased pildiotsingud

Sarnane pildiotsing lisab Opera brauseri kontekstimenüüsse täiendava käsu, et otsida sarnaseid pilte mitme otsingumootori abil.

Või esitatakse sarnaste piltidega väljaannete loend.

Otsingulaiendid Mozilla Firefoxi jaoks

Saidi otsing

Nagu kahel eelmisel juhul, on ka Mozilla Firefoxi brauseri jaoks spetsiaalne laiendus Internetis igal saidil otsimiseks.

Ainult Fire Foxi puhul on saidiotsing manustatud brauseri olemasolevasse otsinguväljale, lisades selle ikooni punase suurendusklaasi kujul tavalise otsinguikooni ette.

Tavalise Mozilla Firefoxi otsingu vaikeotsingumootori muutmine hõlmab ka saitidelt otsimise otsingumootori muutmist.

Saidiotsingu laiendus on integreeritud Mozilla Firefoxi kontekstimenüüsse ja valides mis tahes käepärast sõna, näete eraldi otsingutulemustes saidi kõiki lehti, kus see sõna esineb.

Otsi byffoxi järgi

Kõik selliste "veel valmimata" nimedega tarkvaratooted ärritavad reeglina paljusid kasutajaid asjaolu pärast, et nad isegi ei vihja pakutud tööriistakomplekti sihipärasele eesmärgile.

Ja mida täpselt pakub "Softina Vasyast" või "Repak mängis Petyast", peate õppima alles pärast üksikasjalikku tutvumist kirjeldusega. Sellise kergemeelse nimetuse nagu "Otsi byffoxi järgi" taga peitub aga kasulik ja intelligentne funktsionaalsus. See laiendus võimaldab teil erinevate otsingumootorite abil täiendada brauseri kontekstimenüüd valitud sõna jaoks täiendava otsingukäsuga.

See märkus on jätk eelmisele artiklile (tõlgitud) "Ajaveebi otsimine Google AJAX Search API ja jQuery abil".
Peale selle kirjutamist mõtlesin, kuhu oleks kõige parem selline vormi- ja tulemusvaip paigutada, välja arvatud eraldi leht. Idee ei lasknud kaua oodata: loogiline on proovida hüpikaknas tulemustega otsingut.

Esiteks demo:

Blogi otsing↓

Hüpikotsingu "aluseks" valisin jQuery modaalakna plugina nimega Paljasta. See on kerge, ilma tarbetute elementideta ja seda on väga lihtne ühendada.

Avalda paigaldus.
Skripti ja stiilide lingid on kirjutatud malli jaotisesse:
Ärge unustage, et pistikprogrammi arhiivis on png-pilt, mille peate oma Picasso albumisse panema ja määrama selle tee paljastada.css.

Järgmine samm on pistikprogrammi lähtestamine" häälestamine" stsenaarium(pane see sinna):

Seejärel määratleme hüpikakna sisu(me paneme selle postituse kehasse):

Blogi otsing↓

kleepige siia kõik otsingukoodid artiklist "Ajaveebi otsimine Google AJAX Search API ja jQuery abil".

Minu kommentaari kohaselt selles koodis copy-paste kogu "google otsing" sinna mida praegu arutatakse. CSS-laadilehel peate suurendama valge ruudu pindala.

Ja viimane samm on link modaalaknale, mis võib olla kas tekst või graafiline. Lingi kood pildina (ka postituse sisus):

Kell Paljasta, modaalse akna pistikprogrammi, on kahte tüüpi animatsioone: fade ja fadeAndPop, reguleeritav efekti kiirus: animatsiooni kiirus: 300 ja võimalus sulgeda kogu aken, klõpsates tuhmunud taustal: closeonbackgroundclick: tõsi.

Need sätted kirjutatakse skripti "konfiguratsioon" (vt ülal):

$("#myModal").reveal(( animatsioon: "fadeAndPop", //fade, fadeAndPop, none animationspeed: 300, //kui kiiresti animatsioonid sulguvadbackgroundclick: true, //kui klõpsate taustal suletakse modaal? dismissmodalclass: "close-reveal-modal" //nupu või elemendi klass, mis sulgeb avatud modaali ));

Või saab neid valikuid ühendada läbi link modaalsel aknal (vt ülal)

Tuleb mõista, et selline skeem otsige eraldi aknas- puhas eksperiment ja nõuab hoolikamat kohandamist.