Թռուցիկ պատուհանները լայն բազմազան նպատակների համար շատ օգտագործում են վեբ շինարարության մեջ: Դրանք կարող են օգտագործվել տարբեր տեսակի ընտրացանկեր ստեղծելու, բարդ ձևաթղթերը լրացնելիս գովազդային տեքստեր և գրաֆիկա տեղադրելու, գործիքագրեր, և հարմար է, որ ձևերը տեղադրվեն էջում տեղ չզբաղեցնող պատուհաններում: Մեր հոդվածում դուք կգտնեք նկարագրություն, թե ինչպես կարող եք պատրաստել նման պատուհան:
Դա անհրաժեշտ է
HTML- ի հիմնական գիտելիքներ:
Հրահանգներ
Քայլ 1
թռուցիկ, html, թաքնված շերտ
Քայլ 2
Webանցի բազմաթիվ էջերում դուք կարող եք տեսնել, որ տարբեր JavaScript շրջանակների շքեղ գրադարաններ (jQuery, MooTools, Նախատիպ և այլն) օգտագործվում են էջերում փոփ-պատուհաններ ստեղծելու համար: Սակայն, ըստ էության, դրանք անհրաժեշտ չեն այս հատուկ խնդիրը լուծելիս: Հիպերտեքստի նշման լեզվով (HTML) և Կասկադային ոճի թերթերով (CSS) առկա գործիքները բավարար են պատուհաններ ստեղծելու համար: Այս եղանակով ստեղծված պատուհանները կաշխատեն `անկախ այն բանից` JavaScript- ը միացված է այցելուի զննարկչում:
Պատուհանը ստեղծող բոլոր ծածկագիրը կարող է տեղադրվել երկու տողի վրա: Առաջին տողը ստեղծում է հղում, որը պետք է կտտացնել ՝ ելնող պատուհանը ցուցադրելու համար.
Սեղմեք այստեղ!
Այստեղ հղման պիտակի onmouseover հատկանիշը սահմանում է հղումների համար կանխադրված մկնիկի կուրսորը: Onclick հատկանիշը նշում է, որ երբ հղումը կտտացվում է, թաքնված PopUp բլոկը պետք է տեսանելի դառնա:
Երկրորդ տողը, ըստ էության, ելնող պատուհանն է: Շերտը PopUp նույնացուցիչով և պատուհանի չափով, տեքստի գույնով և չափով, ֆոնի վրա և եզրագծով, որոնք նշված են ոճի հատկանիշում.
Սա ելնող պատուհանի տեքստն է
Դա լռելյայն տեսանելի չէ. Սա նշվում է շերտի ոճի նկարագրության մեջ ցուցիչի ընտրիչի կողմից, որի արժեքը չկա:
Իրականում, սա է այն ամենը, ինչ անհրաժեշտ է pop-up պատուհան ստեղծելու համար. Տեղադրեք այս երկու տողերը պիտակների և ձեր էջի միջև և այն պատրաստ է գործելու:
Քայլ 3
Որպեսզի կարողանաք փակել պիտակի առջևի ելնող պատուհանը, անհրաժեշտ է ավելացնել հղում, որը կատարում է հակառակ գործողությունը ՝ տեսանելի շերտը թաքցնելով PopUp նույնացուցիչով.
փակել
Քայլ 4
Եվ եթե ուզում եք, որ պատուհանը դուրս գա ոչ թե կտտացնելով, այլ մկնիկի ցուցիչը սավառնելով, ապա հղումով առաջին տողը պետք է ձևափոխվի այս եղանակով.
տեղափոխեք մկնիկը այստեղից
Քայլ 5
Այժմ դուք ծանոթ եք pop-up պատուհանի ծածկագրի սկզբունքին և կառուցվածքին, և դրա տեսքի և բովանդակության ձևավորումը ամբողջովին կախված է ձեր նպատակներից և երեւակայությունից:
