Մոդալային պատուհանում հետադարձ կապի սցենար: Պարզ Այաքս կոնտակտային ձև
Ողջույն բոլորին. Նրանք ռմբակոծվեցին հարցերով, թե ինչպես կարելի է կիրառել այն ձևը, որը հայտնվում է մոդալ պատուհանկոճակը սեղմելուց և ներկայացնելուց հետո կցուցադրվի հաջողության կամ ձախողման հաղորդագրություն:
Կարծում եմ, որ ինտերնետում արդեն շատ բան կա, բայց քանի որ մարդիկ հարցնում են, ես որոշեցի դա անել: Ավելին, նման ֆունկցիոնալությունը պետք է առկա լինի գրեթե յուրաքանչյուր վայրէջքի էջում `հետադարձ կոճակ գործարկելու համար: Իրոք, այժմ ավելի ու ավելի են հայտնվում AB- թեստավորման արդյունքները, որոնք ասում են, որ բաց ձևերն ավելի վատ են աշխատում, քան այն ձևերը, որոնք թաքնված են մոդալ պատուհանում և բացվում են կոճակին սեղմելուց հետո:
Ոմանք պնդում են, որ դա պայմանավորված է նրանով, որ մարդիկ դանդաղ «զարգացնում են անձեռնմխելիությունը», իսկ բաց ձևը ագրեսիվ վաճառք է: Ենթադրաբար, այժմ այն ժամանակն է, երբ օգտագործողը տեսնում է բաց ձևկարծում է, որ փորձում են իրեն ինչ -որ բան «վաճառել»: Ես այնքան էլ համաձայն չեմ այս տեսության հետ, բայց ճշմարտության հատիկն առկա է: Գուցե բիզնեսի որոշ տեսակների դեպքում դա ճիշտ է: Առայժմ եկեք անցնենք ձևի իրականացմանը:
Նշում!Ես մանրամասն չեմ նկարագրի յուրաքանչյուր գործողություն, այլ ձեզ կառաջարկեմ պատրաստի տարբերակը սկզբնաղբյուրում: Եթե ունեք հարցեր, գրեք մեկնաբանություններում: Կպարզենք :)
Այսօր մենք կսկսենք ոչ թե jQuery- ով, այլ կոճակի և ձևի դասավորությամբ: Բոլոր սցենարները ներառված են էջի վերջում:
Կոճակը, կտտացնելով, որի վրա կբացվի մոդալային պատուհանը.
Ներկայացրեք ձեր դիմումը
Կարող եք սահմանել ցանկացած դաս, բայց href- ում գրեք #modal - սա կլինի ստվերում և կոնտակտային ձևով տարայի ID- ն:
Այժմ ես կտամ ձևի ծածկագիրը և այն բլոկը, որի վրա տեղակայված կլինի ձևը.
Ոճերի ավելացումից հետո այն ունի հետևյալ տեսքը.
Մոդալային պատուհան ստեղծելու համար օգտագործվել է Remodal գրադարանը: Սա css և js ֆայլերի հավաքածու է ՝ միայն անիմացիոն մոդալ պատուհաններ ստեղծելու համար: Դուք կարող եք բեռնել այն հղումից կամ արդեն իմ խմբագրումներով `հոդվածի վերջում:
Ներառեք ոճերը գլխի պիտակների միջև.
Եվ նախքան մարմնի փակման պիտակը `ավելացրեք սցենարներ.
Script.js- ը սցենար է ձևը մշակելու համար: Նույն Այաքսը, որը թույլ է տալիս մեզ իրականացնել ամբողջ ընթացակարգը ՝ առանց էջը վերբեռնելու.
$ (փաստաթուղթ). արդեն (գործառույթ () ($ ("ձև"). ներկայացնել (գործառույթ () (// Ստացեք ձևի ID var formID = $ (սա) .attr ("id"); // Ավելացնել հաշ ID- ին var formNm = $ ("#" + formID); $ .ajax ((տեսակը `" POST ", url:" mail.php ", data: formNm.serialize (), հաջողություն ՝ գործառույթ (data) ( // Ուղարկման արդյունքի ելքային տեքստ $ (formNm) .html (տվյալներ);), սխալ. Գործառույթ (jqXHR, տեքստ, սխալ) (// ուղարկման սխալի տեքստ $ (formNm) .html (սխալ);) )); վերադարձնել կեղծ;));)));
Բնօրինակը չեմ տա css կոդև js մոդալ պատուհանի և ձևի համար պատասխանատու ֆայլերից, քանի որ դրանք բավականին մեծ են: Եթե ինչ -որ բան կա, նայեք աղբյուրին: Բայց php կարգավորիչը հիմնականում ստանդարտ է (եթե կարող եմ այդպես ասել).
Ուղարկողի անունը.$ name Հեռախոս:$ phone "; $ send = փոստ ($ to, $ subject, $ message, $ headers); եթե ($ send ==" true ") (արձագանք"
Շնորհակալություն ձեր հաղորդագրությունը ուղարկելու համար:
";) այլ (արձագանք"
Սխալ Հաղորդագրությունը չի ուղարկվել:
";)) այլ (http_response_code (403); արձագանք" Կրկին փորձիր ";)?>
Խնդրում եմ, մի մոռացեք փոխել հասցեները Էլինքնուրույն:
Ահա այաքս ձևը: Կներեք, որ չփորձեցի մանրամասն բացատրել, թե ինչպես է ստեղծվել յուրաքանչյուր տարր: Ես պարզապես ուզում էի վերջնական արդյունք տալ, բայց իմաստ չունի նկարագրել բոլոր անիմացիաները, արտաքին տեսքը: Ներբեռնեք աղբյուրը և տեղադրեք այն ձեր կայքում: Եվ այսքանը այսօրվա համար: Հաջողություն բոլորին:
Տղերք, ես խստորեն խնդրում եմ ձեզ փորձարկել ձևը իրական կամ վիրտուալ սերվեր(հյուրընկալում): Խնդրում ենք համոզվել, որ ձեր սերվերն ապահովում է php, դուք ունեք վճարովի ծրագիր և ոչ փորձաշրջան: Հակառակ դեպքում, 90% դեպքերում, ձեւը չի աշխատի:
Մի սպասեք նամակին ձեր փոստարկղում, եթե պարզապես բացել եք ինդեքսային ֆայլը ձեր դիտարկիչում և կտտացրել եք «Ուղարկել» կոճակին: Php- ը սերվերի կողմից տրամադրվող լեզու է:
Եթե դուք չափազանց ծույլ եք դա պարզելու և ձևը ինքներդ պատրաստելու համար, ապա խորհուրդ եմ տալիս ուշադրություն դարձնել:
Ողջույն, սիրելի՛ ընթերցողներ: Այս ձեռնարկում ես ձեզ ցույց կտամ, թե ինչպես կարող ենք ստիպել HTML5 էլ. Փոստի գրանցման ձևը վավերացնել մուտքագրված URL- ը JQuery- ով: Հաստատման համար մենք կօգտագործենք սովորական արտահայտություններ, և մենք կպահենք մուտքագրված հասցեն MySql տվյալների բազայում: Այսպիսով, խնայելիս այն կօգտագործվի AJAX(այսինքն ՝ զանգահարեք PHP սցենարը ՝ առանց էջը վերբեռնելու): Արդյունքը կարելի է դիտել ցուցադրական էջում, ինչպես նաև ներբեռնել աղբյուրը: Եկեք սկսենք!
Հիմնական նշագրում
Սկսենք ՝ ստեղծելով նոր index.html ֆայլ: Եվ եկեք կազմենք HTML5- ին հավատարիմ փաստաթղթերի պարզ կառուցվածք: Մենք նաև անմիջապես կներառենք CSS ոճերն ու գրադարանը, դա մեզ պետք կգա մուտքագրված էլ. Փոստը ստուգելիս.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15
<html lang = "ru"> <գլուխ> <meta charset = "utf-8"> <վերնագիր>Էլեկտրոնային փոստի գրանցման ձև jQuery վավերացնողով</ վերնագիր>
Մեր ձևի նպատակն է ստուգել մուտքագրված այցելուի էլ. Հասցեն և ինչ -որ կերպ պահել այն բաժանորդների ցանկում: Դրա համար մենք անում ենք կանոնավոր ձևկոճակով ՝ կտտացնելով, որի վրա հասցեն մշակվում և պահվում է տվյալների բազայում կամ ֆայլում, ինչպես որևէ մեկին հարմար է: Դասում մենք հաշվի կառնենք տվյալների ձայնագրության մեջ պահելը: Սա ավելի պարզ կդարձնի, մենք կկենտրոնանանք մուտքագրված հասցեի ճշտության ստուգման վրա: Բաժանորդագրության ձևն այսպիսին է.
Եկեք փաթեթավորենք ձևը #completeform div բլոկում, որպեսզի հասցեն պահպանելուց հետո ձևը կարող է փլուզվել:
Մենք նաև օգտագործում ենք մի քանի նոր հատկանիշներ մուտքի դաշտում: Դաշտի տեսակը սահմանվում է որպես «էլփոստ», որպեսզի շարժական դիտարկիչները կարողանան ցուցադրել համապատասխան ստեղնաշարը: Chrome- ը և WebKit- ի որոշ դիտարկիչներ կօգտագործեն դա ՝ ստուգելու համար, թե արդյոք օգտվողը մուտքագրել է հասցե: Ավտոմատ ուղղման և ինքնակապիտալիզացիայի հատկանիշները նախատեսված են հատուկ բջջային դիտարկիչների համար:
Span id- ով սխալսկզբում թաքնված էր, որի համար ցուցադրման հատկությունը պատասխանատու է ոչ մեկի արժեքով, սա ոճերով ֆայլում գրված է դրա մասին մի փոքր ուշ: Բայց հենց օգտագործողը մուտքագրեց անվավեր էլ.
JQuery վավերացուցիչ և AJAX հարցում
Սկսենք պարզ էլփոստի ստուգման գործառույթից: Մենք օգտագործում ենք սովորական արտահայտության տող `ստուգելու համար, արդյոք տեքստի տողը համապատասխանում է էլփոստի ստանդարտ շարահյուսությանը, այնուհետև վերադարձնում ենք բուլյան արժեքը ճշմարիտ, հակառակ դեպքում` կեղծ:
Եկեք նայենք ամբողջականInviteForm () գործառույթին: Հասցեի մուտքագրման ձևը չշփոթելու համար մենք կփլուզենք fadeOut էֆեկտը 400 միլիվայրկյանով: Եվ որպես հետադարձ կապ, մենք կդիմենք $ .ajax () գործառույթին, որի օգնությամբ մենք կկանչենք save.php ֆայլը և կպահենք մուտքագրված հասցեն տվյալների բազայում: Ստորև մեջբերեմ save.php ֆայլի աղբյուրի կոդը, բայց առայժմ եկեք դա պարզենք $ .ajax () գործառույթով:
$ .ajax- բեռնում է հեռավոր էջը `օգտագործելով HTTP հարցում... Որպես $ .ajax () ֆունկցիայի փաստարկ ՝ փոխանցվում է օբյեկտ, որը բաղկացած է բանալին / արժեքից զույգերից, որոնք օգտագործվում են հարցումը նախաստորագրելու և շահարկելու համար: Մեր դեպքում մենք կօգտագործենք հետևյալ օբյեկտները.
տեսակը ՝ 'POST' - լռելյայն ընտրեք ֆայլի պահանջի տեսակը ՍՏԱՆԱԼ, POST- ի և GET- ի միջև տարբերությունը շատ մեծ չէ, պարզապես GET հարցման դեպքում տվյալները փոխանցվում են վերնագրում, իսկ POST- ով `հարցման մարմնում, հետևաբար, POST- ի միջոցով կարող եք ավելի շատ տեղեկատվություն փոխանցել.
url: 'save.php' - ճանապարհ դեպի գործարկվող ֆայլ;
տվյալներ ՝ ’email =’ + $ («# էլփոստ»). val ()- տվյալները, որոնք ուղարկվում են սերվերին: ՀԵՏ օգտագործելով CSSընտրող #փոստը վերաբերում է տարրին հետ id = "էլփոստ"և ստացեք արժեքի հատկանիշի բովանդակությունը, այսինքն ՝ օգտագործողի կողմից մուտքագրված էլ. Եվ այս բովանդակությունը հանձնարարեք փոփոխականին էլորը մենք կօգտագործենք save.php ֆայլում;
հաջողություն. գործառույթ () ($ («# ամբողջական ձև»). առաջ (« Ամեն ինչ պատրաստ է: Դուք ավելացվել եք փոստային ցուցակին:‘);}
- հաջողության գործառույթը կոչվում է հաջողություն Այաքսի խնդրանք... Ֆունկցիան կատարում է հետևյալ գործողությունը. #Comformform div- ի դիմաց մենք տեղադրում ենք բովանդակություն, որը տեղեկացնում է օգտվողին, որ նրա էլ. Հասցեն ավելացվել է փոստացանկին:
Եվ օգտագործելով setTimeout մեթոդը, ձևը թաքնված է, իսկ ajax- ի հարցումը կատարվում է ասինքրոն կերպով ՝ 1100 միլիվայրկյան ուշացումով:
Ձևի մշակում
Էջի տարրերին անդրադառնալու հարմարության համար եկեք մի քանի փոփոխական ստեղծենք ընտրողներով #error և #btnwrap:
var erdiv = $ ("# սխալ"); var btnwrap = $ ("# btnwrap");
Միջոցառումների կառավարիչ օգտագործելը ապրելհետևեք «Բաժանորդագրվել» կոճակի սեղմմանը, դրա id = "sendbtn": E.preventDefault () մեթոդը; չեղարկում է գործողության համար դիտարկիչի ստանդարտ պահվածքը (սեղմելով կոճակի վրա), այն է ՝ մենք չեղարկում ենք էջի թարմացումը և URL- ի փոփոխությունը: Մենք մուտքագրված էլփոստը հանձնարարում ենք emailval փոփոխականին և կարող ենք սկսել մշակել այս փոփոխականը:
Առաջին եթեեթե (! isEmail (emailval)) ստուգում է, արդյոք isEmail գործառույթը կեղծ է վերադարձվել, դա նշանակում է, որ օգտվողի մուտքագրած էլ. փոստի հասցեն չի համընկնում սովորական արտահայտության հետ, այսինքն ՝ ճիշտ չէ, մենք այդ մասին կտեղեկացնենք օգտագործողին սխալի արգելափակում, ցուցադրեք հաղորդագրությունը (Դուք սխալ եք մուտքագրել էլ. փոստի հասցեն):
Հիմա երկրորդը եթեկատարվում է միայն այն դեպքում, երբ օգտագործողը մուտքագրել է վավեր էլ. հասցե: Այնուհետեւ մենք կարող ենք սկսել հասցեն պահպանելու գործընթացը:
Գործընթացը պարզ դարձնելու համար տեղադրեք համապատասխան տեքստը սխալի բլոկի մեջ և տեղադրեք GIF պատկեր այն բլոկում, որտեղ գտնվում էր «Բաժանորդագրվել» կոճակը: Եվ մենք կոչում ենք ամբողջականInviteForm () գործառույթ, որը մենք քննարկեցինք վերևում:
Քանի որ ես ընտրեցի մուտքագրված հասցեն տվյալների բազայում պահելու մեթոդը, ես հակիրճ կխոսեմ տվյալների բազան ստեղծելու և աղյուսակի, ինչպես նաև խոստացված save.php ֆայլի ծածկագրի մասին, որն աշխատում է MySql տվյալների բազայի հետ:
Դրա համար մեզ պետք է տեղական սերվեր, Ես օգտագործում եմ Դենվերը: Անշուշտ, շատերն են օգտագործում այն, այնպես որ ես չեմ մանրամասնի: Անցնում ենք phpMyAdminև ստեղծել տվյալների բազա էլ:
Բաժանորդների հասցեները պահպանելու համար մեզ անհրաժեշտ է մեկ դաշտ ՝ երկու դաշտով, եկեք այն անվանենք հասցեն:
Հիմա ժամանակն է խոսել դրա մասին վերջին տարրըստեղծված բաժանորդագրության մասին, save.php ֆայլի մասին: Այն պարունակում է PHP սցենար ՝ էլփոստի հասցեն տվյալների բազայում պահելու համար:
Նախ, մենք ստուգում ենք, թե արդյոք էլփոստի փոփոխականը գոյություն ունի գլոբալ POST զանգվածում, եթե այո, ապա դրա արժեքը վերագրեք $ email փոփոխականին: Հաջորդը, մենք կապ ենք հաստատում mysql_connect () սերվերի հետ, օգտագործողը արմատ է, գաղտնաբառ չկա: Տվյալների բազայի ընտրություն էլև հարցում կատարել տվյալների բազայում, տեղադրել նոր գրառում հասցեների աղյուսակում, որտեղ $ էլփոստի փոփոխականի արժեքը կտեղադրվի հասցեի դաշտերում: Վերջ!
Սա ավարտում է դասը: Ուզում եմ հիշեցնել, որ այս բաժանորդագրությունը գործում է միայն սերվերի վրա (քանի որ մենք օգտագործում ենք հիմքը և):
Բարեւ Ձեզ. Այս ձեռնարկում մենք պատրաստելու ենք ամբողջական ձև: հետադարձ կապ, և այն կհայտնվի մոդալ պատուհանում ՝ կտտացնելով էջի կոճակին: Այս դասը ես ինքս արեցի ՝ զրոյից, օգտագործելով միայն jQuery շրջանակը և մեկ փոքր JavaScript » - ը: Դասը շատ հետաքրքիր է, ուստի խնդրում եմ մի՛ անցեք: Ստորև կարող եք դիտել արդյունքում ստացված ձևի դեմոն, ինչպես նաև ներբեռնել աշխատանքի համար անհրաժեշտ ֆայլեր.
Նախ, ես ձեզ կասեմ, թե ինչ ֆայլեր են մեզ անհրաժեշտ և, ըստ էության, ինչու են դրանք անհրաժեշտ.
պատկերներ- թղթապանակը, որտեղ պահվում են մեր ձևի բոլոր պատկերները.
index.html- հիմնական, «ինդեքս» ֆայլը, որի մեջ կլինի հետադարձ կապի ձևը կանչելու կոճակը.
contact.html- ձևը պարունակող ֆայլը: Այս ֆայլն է, որը միացված կլինի մոդալ պատուհանին.
send.php- ֆայլերի մշակող, որը պատասխանատու է նամակի ուղարկման համար.
jquery.js- հիմնական jQuery շրջանակը.
style.css- ֆայլ մեր ձևի կասկադային ոճի թերթերով:
Այսպիսով, եկեք ավելի առաջ և կարգով ... Ձևի աշխատանքը կլինի հետևյալը. Օգտագործողը մտնում է այն էջը, որի վրա գտնվում է մոդալ պատուհանը կանչելու կոճակը, կտտացնում է այն, այնուհետև ձևը հայտնվում է, դրանում ՝ այցելուը: մուտքագրում է բոլոր տվյալները և հաղորդագրության տեքստը և ուղարկում, այնուհետև այն փոխանցվում է էջին ՝ նամակի հաջող կամ անհաջող ուղարկման մասին հաղորդագրությամբ: Այսքանը, հիմա եկեք սկսենք շարել մեր ձևը ...
Քայլ 2.Ձևը զանգահարելու կոճակ:
Որպեսզի ձևով մեր մոդալ պատուհանը հայտնվի, դուք պետք է ինչ -որ կերպ ստիպեք դա անել: Դա անելու համար մենք պարզապես պետք է սովորական կոճակ տեղադրենք էջում: Ստորև բերված է նման կոճակի ծածկագիրը ՝ դրան կիրառվող ոճերի հետ միասին.
Քայլ 3.Ձևը ինքնին + դրա կարգավորումները
Այժմ եկեք պարզենք, թե որտեղ կլինի մեր հետադարձ կապի ձևը: Եվ դա կլինի ֆայլում contact.html, որն արդեն տեղակայված է դասի սկզբնաղբյուրում: Այս ձևը բավականին փոքր է, ուստի ես դրա ծածկագիրը կտեղադրեմ ստորև.
Վարչությանը հաղորդագրություն ուղարկելը.
Ինչպես տեսնում եք, ծածկագրով քայլելիս, նույնիսկ անզեն աչքով, կարող եք տեսնել, որ ձևի ավելի լավ ցուցադրման համար ես օգտագործել եմ սեղանի դասավորությունը: Սա ինձ համար շատ օգտակար էր ձևի բոլոր դաշտերը հավասարեցնելու համար:
Քայլ 4.Էլեկտրոնային նամակներ ուղարկելու պատասխանատու
Այստեղ ես ձեզ արագորեն կծանոթացնեմ փոստի գլխավոր կառավարիչին: Ես այստեղ չեմ տա դրա կոդը, քանի որ այն սկզբնաղբյուրի մեջ է: Ներբեռնեք և դիտեք դրա բովանդակությունը: Եթե php- ն ինչ -որ տեղ միջանկյալ մակարդակով գիտեք, ինչպես և ես, ապա ինքներդ կարող եք հեշտությամբ վերլուծել այս մշակողի ամբողջ ծածկագիրը: Եթե ամեն ինչ պատրաստ է, ուրեմն շարունակիր ...
Քայլ 5.Պտտելով հիմնական jQuery շրջանակը
Այժմ, ինչպես ցանկացած jQuery ձեռնարկի դեպքում, մենք պետք է «կապենք» հիմնական jQuery շրջանակը: Դա անելու համար եկեք մի փոքր վերադառնանք ՝ այնտեղ, որտեղ գտնվում է մեր կոճակը և պիտակների միջև
եւտեղադրեք հետևյալ ծածկագիրը.
Քայլ 6.Ձևավորել ոճը
Ինչպես տեսնում եք, մեր ձևի ոճերը մատուցվում են առանձին ՝ ֆայլում style.cssքանի որ այս ոճերը չափազանց շատ տեղ են զբաղեցնում: Մենք պարզապես պետք է ստորև նշված կոդը կապենք մեր ինդեքսի ֆայլին.
Քայլ 7. jQuery ճշգրտումներ
Այժմ մոդալ ձևի պատուհանի ամբողջական աշխատանքի համար մենք պետք է տեղադրենք հետևյալ jQuery ծածկագիրը.
Եզրակացություն.
Այսպիսով, մեր հետաքրքիր հետադարձ ձևը պատրաստ է: Theանապարհը երկար էր և դժվար, այնպես որ, եթե որևէ մեկը ինչ -որ բան չհասկացավ, ես կլսեմ ձեր հարցերը այս դասի մեկնաբանություններում: Եվ դա ամեն ինչ ինձ համար է, մինչև նորից հանդիպենք, ընկերներ:
Հարգանքներով ՝ jQuery - ուղեցույց - Մ.Կ.
Մենք բոլորս սովոր ենք տեսնել կոնտակտներ առանձին, հատուկ ստեղծված էջերում ՝ օգտվողների կարծիքի համար: Որպես կանոն, նման էջերում, բացի կոնտակտային ձևերից, նրանք տեղադրում են բազմաթիվ այլ տեղեկություններ փոխազդեցության և հաղորդակցության համար: Մեխանիզմը կարգաբերված է, տարիների ընթացքում ապացուցված և անթերի է աշխատում: Բայց որոշ դեպքերում անհրաժեշտ է դառնում առանձին ցուցադրել կոնտակտային ձևորպես թռուցիկ պատուհան ՝ առանց օգտվողներին այլ էջեր ուղղորդելու: Timeամանակին մենք մտածում էինք jQuery- ի հետ աշխատելու մասին: Այսօր ես ուզում եմ ձեզ ծանոթացնել մի հետաքրքիր լուծման հետ ՝ կայքի համար առանձին, սկզբնապես մշակված, թռուցիկ ձևի ստեղծման համար:
Իմ կարծիքով, օգտվողների հետ փոխգործակցության միջոցի հիանալի օրինակ:
Մենք նայեցինք օրինակին: Այժմ, եկեք այս ձևը քայքայենք դրա բաղադրիչների մեջ ՝ ստեղծումից ընդհանուր կառուցվածքը Html- ում ՝ նախքան CSS- ի միջոցով դասավորության տեսքը ձևավորելը:
Ձևի HTML կոդ
Ոչ մի գերբնական բան, սովորական շփման ձևի ամենապարզ շրջանակը, որը տեղադրված է բլոկի տարրի մեջ divհատուկ նույնացուցիչով և դասով ՝ ձևի տեսքը հետագայում ձևավորելու համար cssև շփվեք փոքրիկ javascript- ի հետ, որը մեզ անհրաժեշտ է ակտիվացնել և փակել բացվող ձևը:
փակել
Ուղարկեք մեզ հաղորդագրություն
փակել
Ուղարկեք մեզ հաղորդագրություն
Բացի այդ, մենք պետք է ստեղծենք մթնեցնող շերտ ընդհանուր ֆոնի համար ՝ թռուցիկ ձևը ակտիվացնելիս: Դուք կարող եք այս առաջադրանքը կատարել տարբեր եղանակներով, բայց մենք չափազանց խելացի չենք լինի և ավելացնենք ևս մեկը divնրան հատկացնելով նույնացուցիչ ՝ id = "fade" և class: class = "black-overlay": Դուք կարող եք տեղադրել այն ձևի կողքին, որպեսզի անհրաժեշտության դեպքում երկար չփնտրեք:
Դուք հավանաբար նկատեցիք, որ փակման կոճակը մակագրված է կոնտակտային ձևի բլոկում ՝ վերնագրից անմիջապես առաջ, և դա տրամաբանական է, բայց որտե՞ղ պետք է լինի, կոճակը ձևի հետ միասին պետք է հայտնվի և անհետանա: Արտաքին տեսքև փակման կոճակի դիրքը մենք հետագայում կձևավորենք CSS- ում
Այսքանը, եկեք հիմա նայենք էջի ամբողջական Html ծածկագրին, որը պարունակում է թռուցիկ արձագանքի ձևը.
Բացվող կոնտակտային ձև
Հետադարձ կապ
փակել
Ուղարկեք մեզ հաղորդագրություն
Բացվող կոնտակտային ձև
Հետադարձ կապ
փակել
Ուղարկեք մեզ հաղորդագրություն
Մինչև զվարճալի հատվածին հասնելը ՝ ձևավորելով մեր կոնտակտային ձևը CSS- ի հետ, ես մի փոքր հետ կքաշվեմ: Ամենաուշադիրը, հավանաբար, նկատեց, որ ձևը բացելու և փակելու կոճակները կիրառվում են որպես «jammer» - ի հղումներ href = "javascript: void (0)": Լավ կամ վատ, ես ինքս ինձ համար ճշգրիտ պատասխան չեմ գտել, ես օգտագործում եմ այս մեթոդը սովորությունից ելնելով: Թեև այն տարրերի համար, որոնց վրա onclick իրադարձությունը մշակվում է սցենարի կողմից, ես կարծում եմ, որ այն ավելի տրամաբանական և ճիշտ է օգտագործել