Маш олон янзын зориулалттай цэстэй цонхнууд вэб бүтээхэд олон янзын ашиглагддаг. Эдгээр нь янз бүрийн төрлийн цэс үүсгэх, зар сурталчилгааны текст, график байрлуулах, нарийн төвөгтэй маягт бөглөхдөө ашиглах зөвлөмжийг ашиглахад ашиглагдах бөгөөд хуудсыг зай эзэлдэггүй цонхнуудад өөрсдөө байрлуулах нь тохиромжтой байдаг. Манай нийтлэлээс та ийм цонхыг хэрхэн яаж хийх талаар тайлбарыг олох болно.
Энэ нь зайлшгүй шаардлагатай
HTML-ийн талаархи анхан шатны мэдлэг
Зааварчилгаа
1-р алхам
попап, html, далд давхарга
Алхам 2
Вэб дээрх олон хуудсан дээрээс янз бүрийн JavaScript хүрээний тансаг номын сангууд (jQuery, MooTools, Prototype гэх мэт) хуудсуудад гарч ирэх цонхыг бий болгоход ашигладаг болохыг харж болно. Гэсэн хэдий ч, үнэндээ эдгээр тодорхой асуудлыг шийдвэрлэхэд эдгээр нь шаардлагагүй юм. Hypertext Markup Language (HTML) болон Cascading Style Sheets (CSS) дээр байгаа хэрэгслүүд нь попап цонх үүсгэхэд хангалттай. Энэ аргаар бүтээсэн цонх нь зочин хөтөч дээр JavaScript идэвхжсэн эсэхээс үл хамааран ажиллах болно.
Попапыг үүсгэдэг бүх кодыг хоёр мөрөнд байрлуулж болно. Эхний мөр нь попапыг харуулахын тулд товшсон байх ёстой холбоосыг үүсгэдэг.
Энд дар!
Энд холбоосын шошгын onmouseover шинж чанар нь холбоосуудын хулганы курсорын анхдагч төрлийг тохируулдаг. Onclick шинж чанар нь холбоосыг дарахад далд PopUp блок харагдах болно гэдгийг зааж өгдөг.
Хоёр дахь мөр нь үнэндээ попап цонх юм. PopUp танигчтай давхарга ба цонхны хэмжээ, текстийн өнгө, хэмжээ, хэв маягийн атрибутад заасан хүрээ, хүрээ:
Энэ бол попап дахь текст юм
Энэ нь анхдагчаар харагддаггүй - үүнийг давхаргын хэв маягийн тодорхойлолтонд байхгүй утгатай дэлгэц сонгогчоор зааж өгдөг.
Чухамдаа энэ нь танд цэстэй цонх үүсгэхэд л хангалттай юм. Энэ хоёр мөрийг хаягууд болон хуудасныхаа хооронд байрлуулаад, явахад бэлэн болно.
Алхам 3
Шошгоны өмнө гарч ирэх цонхыг хаахын тулд эсрэг үйлдлийг гүйцэтгэдэг холбоосыг нэмж, PopUp танигчтай харагдахуйц давхаргыг нуух хэрэгтэй.
ойрхон
Алхам 4
Хэрэв та цонхыг дарах замаар биш харин хулганы курсорыг дарж гарч ирэхийг хүсвэл холбоос бүхий эхний мөрийг дараах байдлаар өөрчлөх хэрэгтэй.
хулганаа нааш нь зөө!
Алхам 5
Та одоо гарч ирэх цонхны кодын зарчим, бүтцийг мэддэг болсон бөгөөд түүний гадаад байдал, агуулгын дизайн нь таны зорилго, төсөөллөөс бүрэн хамаарна.
