HTML- ում pop-up պատուհանի ստեղծումն իրականացվում է jQuery գրադարանի միջոցով, որը թույլ է տալիս ինտեգրել իրադարձությունների կառավարիչը վեբ էջում և դրանով հնարավոր դարձնել կայքի ակտիվ բովանդակության ցուցադրումը:
Հրահանգներ
Քայլ 1
Բացեք ձեր HTML կայքի էջը տեքստի խմբագրում, որն օգտագործում եք ձեր ուզած կոդը գրելու համար: Թռուցիկ պատուհան տեղադրելու համար կարող եք նաև օգտագործել ստանդարտ Windows Notepad ծրագիրը: Դա անելու համար աջ սեղմեք HTML ֆայլի վրա և ընտրեք «Բացել հետ» - «Գրառման գրքույկ»:
Քայլ 2
Փաստաթուղթ բաժնում ստեղծեք մի շերտ, որը կկարգավորի jQuery- ը.
Քայլ 3
Ապա դուք պետք է նշեք ելնող պատուհանի անունը: Դա անելու համար կարող եք օգտագործել HTML- ի շերտավորված վերնագրերը.
Պատուհանի վերնագիր
Քայլ 4
Դրանից հետո դրեք տեքստը, որը կցուցադրվի պատուհանում ՝ օգտագործելով սցենարը ՝ պարբերություն ստեղծելու համար.
Տեքստ
Քայլ 5
Դրանից հետո ստեղծեք close_win դասի շերտ ՝ ելնող պատուհանը փակելու համար ՝ նախքան նախորդ բռնակը փակելը.
Փակել պատուհանը
Քայլ 6
Ներառեք jQuery գրադարանը ֆայլում `փաստաթղթի նկարագրիչների միջև ավելացնելով անհրաժեշտ պիտակը: Օրինակ:
Քայլ 7
Դրանից հետո մուտքագրեք կոդը `պատուհանը ցուցադրելու համար.
$ (գործառույթ () {
$ ('# Showուցադրել'): Թաքցնել ();
Քայլ 8
Հաջորդը, դուք պետք է կարգավորեք այն իրադարձությունը, երբ օգտվողը սեղմել է մկնիկի կոճակը `ելնելով պատուհանի պատուհանից և կարգավորել պատուհանի փակումը: Դա անելու համար մուտքագրեք հետևյալ ծածկագիրը.
$ (‘# Click-me’): Սեղմիր (գործառույթը () {$ (‘# show’): Fadein (300);})
$ («# Փակել_գալ»): Կտտացնել (ֆունկցիան () {$ («# շոու»): FadeOut (300);})
& lt / script>})
Այս ծրագիրը կարգավորում է օգտվողին `սեղմելով կոճակները` ելնող պատուհանը զանգահարելու համար և կտտացնելով այն փակելու հղմանը:
Քայլ 9
Էջում բացվող պատուհանը ցուցադրելու համար կարող եք օգտագործել կտտացրեք ինձ դասի հղումը, որը նշված է վերևում նշված կոդում: Դա անելու համար փաստաթղթի մարմնում մուտքագրեք հետևյալ կոդը.
Սեղմեք ՝ պատուհանը ցույց տալու համար