Pop-up-ikkunoilla on monenlaisia tarkoituksia web-rakentamisessa. Niillä voidaan luoda erilaisia valikkoja, sijoittaa mainostekstejä ja grafiikkaa, työkaluvihjeitä monimutkaisten lomakkeiden täyttämisen yhteydessä, ja itse lomakkeet on kätevä sijoittaa ikkunoihin, jotka eivät vie tilaa sivulla. Artikkelistamme löydät kuvauksen kuinka voit tehdä tällaisen ikkunan.
Se on välttämätöntä
Perustiedot HTML: stä
Ohjeet
Vaihe 1
ponnahdusikkuna, html, piilotettu kerros
Vaihe 2
Monilla verkkosivuilla voit nähdä, että eri JavaScript-kehysten hienoja kirjastoja (jQuery, MooTools, Prototype jne.) Käytetään ponnahdusikkunoiden luomiseen sivuille. Itse asiassa ne eivät kuitenkaan ole tarpeen tämän ongelman ratkaisemiseksi. Hypertext Markup Language (HTML) ja CSS (CSS) -työkalut ovat käytettävissä ponnahdusikkunoiden luomiseen. Tällä tavalla luodut ikkunat toimivat riippumatta siitä, onko JavaScript otettu käyttöön vierailijan selaimessa.
Kaikki ponnahdusikkunan luova koodi voidaan sijoittaa kahdelle riville. Ensimmäinen rivi luo linkin, jota on napsautettava, jotta ponnahdusikkuna tulee näkyviin:
Klikkaa tästä!
Tässä linkkitunnisteen onmouseover-attribuutti asettaa linkkien oletusarvoisen kursorin tyypin. Onclick-määritteessä määritetään, että kun linkkiä napsautetaan, piilotetun PopUp-lohkon pitäisi tulla näkyviin.
Toinen rivi on itse asiassa ponnahdusikkuna. Kerros PopUp-tunnisteella ja ikkunan koko, tyylimääritteessä määritetyn tekstin väri ja tausta, tausta ja reunus:
Tämä on ponnahdusikkunan teksti
Se ei ole oletusarvoisesti - tämän osoittaa näytön valitsin, jonka arvo ei ole tason tyylityypin kuvauksessa.
Itse asiassa tämä on kaikki mitä tarvitset ponnahdusikkunan luomiseen - aseta nämä kaksi riviä tunnisteiden ja sivusi väliin ja se on valmis aloittamaan.
Vaihe 3
Voit sulkea tagin edessä olevan ponnahdusikkunan lisäämällä linkin, joka suorittaa päinvastaisen toiminnan - piilottamalla näkyvä taso PopUp-tunnisteella:
kiinni
Vaihe 4
Ja jos haluat, että ikkuna ei avaudu napsauttamalla vaan viemällä hiiren osoitinta, ensimmäistä riviä, jolla on linkki, on muokattava tällä tavalla:
siirrä hiiri tänne!
Vaihe 5
Olet nyt perehtynyt ponnahdusikkunakoodin periaatteeseen ja rakenteeseen, ja sen ulkonäön ja sisällön suunnittelu riippuu täysin tavoitteistasi ja mielikuvituksestasi.
