Uznirstošie logi visdažādākajiem mērķiem ir daudz izmantojami tīmekļa izveidē. Tos var izmantot, lai izveidotu dažāda veida izvēlnes, ievietotu reklāmas tekstus un grafikas, padomus, aizpildot sarežģītas veidlapas, un ir ērti ievietot pašas veidlapas logos, kas neaizņem vietu lapā. Mūsu rakstā jūs atradīsit aprakstu par to, kā jūs varat izveidot šādu logu.
Tas ir nepieciešams
HTML pamatzināšanas
Instrukcijas
1. solis
uznirstošais logs, html, slēptais slānis
2. solis
Daudzās tīmekļa lapās jūs varat redzēt, ka dažādu JavaScript ietvaru (iQuery, MooTools, Prototype utt.) Iedomātā bibliotēkas tiek izmantotas, lai lapās izveidotu uznirstošos logus. Tomēr patiesībā tie nav nepieciešami, risinot šo konkrēto problēmu. Hypertext Markup Language (HTML) un Cascading Style Sheets (CSS) pieejamie rīki ir pietiekami, lai izveidotu uznirstošos logus. Šādi izveidoti logi darbosies neatkarīgi no tā, vai apmeklētāja pārlūkprogrammā ir iespējots JavaScript.
Visu kodu, kas izveido uznirstošo logu, var ievietot divās rindās. Pirmajā rindiņā tiek izveidota saite, kas jānoklikšķina, lai parādītu uznirstošo logu:
Spied šeit!
Šeit saites taga onmouseover atribūts nosaka saitēm noklusējuma peles kursora tipu. Atribūts onclick norāda, ka, noklikšķinot uz saites, slēptajam PopUp blokam vajadzētu kļūt redzamam.
Otrā rinda faktiski ir uznirstošais logs. Slānis ar PopUp identifikatoru un stila atribūtā norādīto loga izmēru, teksta krāsu un izmēru, fonu un apmali:
Šis ir teksts uznirstošajā logā
Pēc noklusējuma tas nav redzams - to norāda displeja atlasītājs ar slāņa stila aprakstā vērtību Neviena.
Patiesībā tas ir viss, kas jums nepieciešams, lai izveidotu uznirstošo logu - ievietojiet šīs divas rindiņas starp tagiem un savu lapu, un tas ir gatavs darbam.
3. solis
Lai varētu aizvērt uznirstošo logu taga priekšā, jāpievieno saite, kas veic pretēju darbību - paslēpjot redzamo slāni ar PopUp identifikatoru:
tuvu
4. solis
Un, ja vēlaties, lai logs tiktu parādīts nevis noklikšķinot, bet virzot peles kursoru, pirmā rinda ar saiti ir jāmaina šādi:
pārvietojiet peli šeit!
5. solis
Jūs tagad esat iepazinies ar uznirstošā loga koda principu un struktūru, un tā izskata un satura dizains pilnībā ir atkarīgs no jūsu mērķiem un iztēles.
