Įvairiems tikslams naudojami iššokantys langai yra daug naudojami kuriant internetą. Jie gali būti naudojami kuriant įvairius meniu, talpinant reklaminius tekstus ir grafiką, patarimus pildant sudėtingas formas, o pačias formas patogu įdėti į langus, kurie neužima vietos puslapyje. Mūsų straipsnyje rasite aprašymą, kaip galite padaryti tokį langą.
Tai būtina
Pagrindinės žinios apie HTML
Nurodymai
1 žingsnis
iššokantis langas, html, paslėptas sluoksnis
2 žingsnis
Daugelyje žiniatinklio puslapių galite pamatyti, kad įvairių „JavaScript“struktūrų („jQuery“, „MooTools“, „Prototype“ir kt.) Išgalvotos bibliotekos naudojamos norint sukurti puslapiuose iškylančius langus. Tačiau iš tikrųjų jie nėra būtini sprendžiant šią konkrečią problemą. Iššokantiems langams sukurti pakanka įrankių, galimų hiperteksto žymėjimo kalboje (HTML) ir pakopinių stiliaus lentelėse (CSS). Tokiu būdu sukurti langai veiks nepriklausomai nuo to, ar lankytojo naršyklėje įgalinta „JavaScript“.
Visas iššokantįjį langą sukuriantis kodas gali būti dedamas ant dviejų eilučių. Pirmoje eilutėje sukuriama nuoroda, kurią reikia spustelėti, kad būtų rodomas iššokantis langas:
Paspauskite čia!
Čia nuorodos žymos atributas „onmouseover“nustato numatytąjį nuorodų pelės žymeklio tipą. Atributas „onclick“nurodo, kad spustelėjus nuorodą, paslėptas „PopUp“blokas turėtų tapti matomas.
Antra eilutė iš tikrųjų yra iššokantis langas. Sluoksnis su „PopUp“identifikatoriumi ir lango dydžiu, teksto spalva ir dydžiu, fonu ir kraštu, nurodytu stiliaus atribute:
Tai yra iššokančiojo lango tekstas
Pagal numatytuosius nustatymus jis nėra matomas - tai rodo ekrano parinkiklis, kurio sluoksnio stiliaus aprašyme nėra vertės.
Tiesą sakant, viskas, ko jums reikia, kad sukurtumėte iššokantį langą - padėkite šias dvi eilutes tarp žymų ir savo puslapio ir jis bus paruoštas.
3 žingsnis
Kad galėtumėte uždaryti iššokantįjį langą prieš žymą, turite pridėti nuorodą, kuri atlieka priešingą veiksmą - paslėpdamas matomą sluoksnį su „PopUp“identifikatoriumi:
Uždaryti
4 žingsnis
Ir jei norite, kad langas pasirodytų ne spustelėjus, o užvedus pelės žymeklį, pirmoji eilutė su nuoroda turi būti pakeista taip:
perkelkite pelę čia!
5 žingsnis
Dabar esate susipažinę su iššokančio lango kodo principu ir struktūra, o jo išvaizdos ir turinio dizainas visiškai priklauso nuo jūsų tikslų ir vaizduotės.
