Մոդալային պատուհանում հետադարձ կապի սցենար: Պարզ Այաքս կոնտակտային ձև

Ողջույն բոլորին. Նրանք ռմբակոծվեցին հարցերով, թե ինչպես կարելի է կիրառել այն ձևը, որը հայտնվում է մոդալ պատուհանկոճակը սեղմելուց և ներկայացնելուց հետո կցուցադրվի հաջողության կամ ձախողման հաղորդագրություն:

Կարծում եմ, որ ինտերնետում արդեն շատ բան կա, բայց քանի որ մարդիկ հարցնում են, ես որոշեցի դա անել: Ավելին, նման ֆունկցիոնալությունը պետք է առկա լինի գրեթե յուրաքանչյուր վայրէջքի էջում `հետադարձ կոճակ գործարկելու համար: Իրոք, այժմ ավելի ու ավելի են հայտնվում 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 վավերացնողով</ վերնագիր>

<հղում rel = "stylesheet" type = "text / css" href = "style.css">

<սցենարի տեսակը = "text / javascript" src = "http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js">
</ գլուխ>

<մարմին>

</ մարմին>
</ html>

Դուք այժմ պատրաստ եք ստեղծել ձեր ձևը:

Բաժանորդագրման էլ

Մեր ձևի նպատակն է ստուգել մուտքագրված այցելուի էլ. Հասցեն և ինչ -որ կերպ պահել այն բաժանորդների ցանկում: Դրա համար մենք անում ենք կանոնավոր ձևկոճակով ՝ կտտացնելով, որի վրա հասցեն մշակվում և պահվում է տվյալների բազայում կամ ֆայլում, ինչպես որևէ մեկին հարմար է: Դասում մենք հաշվի կառնենք տվյալների ձայնագրության մեջ պահելը: Սա ավելի պարզ կդարձնի, մենք կկենտրոնանանք մուտքագրված հասցեի ճշտության ստուգման վրա: Բաժանորդագրության ձևն այսպիսին է.

1
2
3
4
5
6
7
8
9



"Մուտքագրեք ձեր էլ. Փոստը" autocomplete = "off" autocorrect = "off" autocapitalize = "off">

Եկեք փաթեթավորենք ձևը #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- ի դիմաց մենք տեղադրում ենք բովանդակություն, որը տեղեկացնում է օգտվողին, որ նրա էլ. Հասցեն ավելացվել է փոստացանկին:

1
2
3
4
5
6
7
8
9
10
11
12

functionInviteForm () գործառույթը (
setTimeout (գործառույթ () ($ ("# ամբողջական ձև") .fadeOut (400, գործառույթ () (
$ .ajax ((
տեսակը ՝ «ՓՈՍՏ»,
url: "save.php",
տվյալներ ՝ "email =" + $ ("# email") .val (),
հաջողություն: գործառույթ () (
$ ("# ամբողջական ձև"). նախքան ( "Ամեն ինչ պատրաստ է: Դուք ավելացվել եք փոստային ցուցակին:" ) ; }
} ) ;
} ) ;
} , 1100 ) ;
}

Եվ օգտագործելով setTimeout մեթոդը, ձևը թաքնված է, իսկ ajax- ի հարցումը կատարվում է ասինքրոն կերպով ՝ 1100 միլիվայրկյան ուշացումով:

Ձևի մշակում

Էջի տարրերին անդրադառնալու հարմարության համար եկեք մի քանի փոփոխական ստեղծենք ընտրողներով #error և #btnwrap:

var erdiv = $ ("# սխալ");
var btnwrap = $ ("# btnwrap");

Միջոցառումների կառավարիչ օգտագործելը ապրելհետևեք «Բաժանորդագրվել» կոճակի սեղմմանը, դրա id = "sendbtn": E.preventDefault () մեթոդը; չեղարկում է գործողության համար դիտարկիչի ստանդարտ պահվածքը (սեղմելով կոճակի վրա), այն է ՝ մենք չեղարկում ենք էջի թարմացումը և URL- ի փոփոխությունը: Մենք մուտքագրված էլփոստը հանձնարարում ենք emailval փոփոխականին և կարող ենք սկսել մշակել այս փոփոխականը:

Առաջին եթեեթե (! isEmail (emailval)) ստուգում է, արդյոք isEmail գործառույթը կեղծ է վերադարձվել, դա նշանակում է, որ օգտվողի մուտքագրած էլ. փոստի հասցեն չի համընկնում սովորական արտահայտության հետ, այսինքն ՝ ճիշտ չէ, մենք այդ մասին կտեղեկացնենք օգտագործողին սխալի արգելափակում, ցուցադրեք հաղորդագրությունը (Դուք սխալ եք մուտքագրել էլ. փոստի հասցեն):

Հիմա երկրորդը եթեկատարվում է միայն այն դեպքում, երբ օգտագործողը մուտքագրել է վավեր էլ. հասցե: Այնուհետեւ մենք կարող ենք սկսել հասցեն պահպանելու գործընթացը:

Գործընթացը պարզ դարձնելու համար տեղադրեք համապատասխան տեքստը սխալի բլոկի մեջ և տեղադրեք GIF պատկեր այն բլոկում, որտեղ գտնվում էր «Բաժանորդագրվել» կոճակը: Եվ մենք կոչում ենք ամբողջականInviteForm () գործառույթ, որը մենք քննարկեցինք վերևում:

1
2
3
4
5
6
7
8
9
10
11
12

եթե (! isEmail (emailval)) (
erdiv.html ( «Դուք ճիշտ էլփոստի հասցե չեք մուտքագրել») ;
erdiv.css («ցուցադրում», «արգելափակում»);
}
եթե (isEmail (emailval))) (
erdiv.css («գույն», «# 719dc8»);
erdiv.html («մշակում ...»);
(ամբողջական Հրավիրիր ձև (), 900);
}
} ) ;
} ) ;

Տվյալների շտեմարան

Քանի որ ես ընտրեցի մուտքագրված հասցեն տվյալների բազայում պահելու մեթոդը, ես հակիրճ կխոսեմ տվյալների բազան ստեղծելու և աղյուսակի, ինչպես նաև խոստացված save.php ֆայլի ծածկագրի մասին, որն աշխատում է MySql տվյալների բազայի հետ:

Դրա համար մեզ պետք է տեղական սերվեր, Ես օգտագործում եմ Դենվերը: Անշուշտ, շատերն են օգտագործում այն, այնպես որ ես չեմ մանրամասնի: Անցնում ենք phpMyAdminև ստեղծել տվյալների բազա էլ:

Բաժանորդների հասցեները պահպանելու համար մեզ անհրաժեշտ է մեկ դաշտ ՝ երկու դաշտով, եկեք այն անվանենք հասցեն:

Դաշտերը կլինեն հետևյալը.

  • id- նույնացուցիչ էլեկտրոնային հասցե(հայտնի է որպես հիմնական բանալին);
  • հասցեն- ուղղակիորեն էլփոստի հասցեն ինքնին:

Save.php ֆայլ

Հիմա ժամանակն է խոսել դրա մասին վերջին տարրըստեղծված բաժանորդագրության մասին, save.php ֆայլի մասին: Այն պարունակում է PHP սցենար ՝ էլփոստի հասցեն տվյալների բազայում պահելու համար:

1
2
3
4
5
6

if (isset ($ _POST ["էլփոստ"])) ($ email = $ _POST ["էլփոստ"];)
$ db = mysql_connect ("localhost", "root", "");
mysql_select_db («էլփոստ», $ db);
mysql_query ( "ՄՏԱԵՔ հասցեն (հասցեն) VALUES (" $ email ")", $ դբ);
?>

Նախ, մենք ստուգում ենք, թե արդյոք էլփոստի փոփոխականը գոյություն ունի գլոբալ POST զանգվածում, եթե այո, ապա դրա արժեքը վերագրեք $ email փոփոխականին: Հաջորդը, մենք կապ ենք հաստատում mysql_connect () սերվերի հետ, օգտագործողը արմատ է, գաղտնաբառ չկա: Տվյալների բազայի ընտրություն էլև հարցում կատարել տվյալների բազայում, տեղադրել նոր գրառում հասցեների աղյուսակում, որտեղ $ էլփոստի փոփոխականի արժեքը կտեղադրվի հասցեի դաշտերում: Վերջ!

Սա ավարտում է դասը: Ուզում եմ հիշեցնել, որ այս բաժանորդագրությունը գործում է միայն սերվերի վրա (քանի որ մենք օգտագործում ենք հիմքը և):

Բարեւ Ձեզ. Այս ձեռնարկում մենք պատրաստելու ենք ամբողջական ձև: հետադարձ կապ, և այն կհայտնվի մոդալ պատուհանում ՝ կտտացնելով էջի կոճակին: Այս դասը ես ինքս արեցի ՝ զրոյից, օգտագործելով միայն jQuery շրջանակը և մեկ փոքր JavaScript » - ը: Դասը շատ հետաքրքիր է, ուստի խնդրում եմ մի՛ անցեք: Ստորև կարող եք դիտել արդյունքում ստացված ձևի դեմոն, ինչպես նաև ներբեռնել աշխատանքի համար անհրաժեշտ ֆայլեր.

Քայլ 1. ընդհանուր նկարագրությունըև ինչպես է գործում հետադարձ կապի ձևը.

Նախ, ես ձեզ կասեմ, թե ինչ ֆայլեր են մեզ անհրաժեշտ և, ըստ էության, ինչու են դրանք անհրաժեշտ.

  • պատկերներ- թղթապանակը, որտեղ պահվում են մեր ձևի բոլոր պատկերները.
  • 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 իրադարձությունը մշակվում է սցենարի կողմից, ես կարծում եմ, որ այն ավելի տրամաբանական և ճիշտ է օգտագործել