, ներսում որոշակի բովանդակությամբ և բացառապես css-ի միջոցով ստեղծված «Փակել» կոճակով։

Բացել պատուհանը 1 Բացել պատուհանը 2 Տեսանյութը պատուհանում 3 Լուսանկարը պատուհանում 4

Վերոնշյալ կոդի օրինակում, պարզության համար, ես հակիրճ բացատրություններ գրեցի մոդալ պատուհանների բեռնարկղերում: Այն մնում է ձեզ համար անալոգիայով, մեջ div կոնտեյներբացվող պատուհան, տեղադրեք ձեր ցանկացած բովանդակություն, լինի դա պարզ տեքստ, նկարներ կամ տեսանյութեր որևէ երրորդ կողմի ռեսուրսից, YouTube-ից, Vimeo-ից և այլն: Մոդալ պատուհաններ կանչելու հղումներ, դուք կարող եք տեքստ պատրաստել, կամ կարող եք դրանք ձևավորել հիանալի, գրադիենտ կոճակների տեսքով, ինչպես օրինակում:

Քայլ 2. CSS

Հաջորդ քայլը, սա ամենահետաքրքիրն է, կարևոր է պատրաստել բոլոր անհրաժեշտ ոճերը մեր մոդալ պատուհանի համար, կազմակերպել տեսքըև ավելացնել ֆունկցիոնալությունը: Ես բաց եմ թողել էջի հիմնական ոճերը՝ չշփոթելու համար, և պարզության համար ավելացրել եմ որոշ մեկնաբանություններ մեկնաբանություններով.

/ * Հիմնական խավարման և մոդալ շերտի ոճերը * / .վերածման (վերև՝ 0; աջ՝ 0; ներքև՝ 0; ձախ՝ 0; z-ի ինդեքս՝ 1; տեսանելիություն՝ թաքնված; / * մթնեցման ֆոն * / ֆոնի գույնը՝ rgba (0, 0, 0, 0.7); անթափանցիկություն՝ 0; դիրքը՝ ֆիքսված; / * ֆիքսված դիրքավորում * / կուրսորը՝ լռելյայն; 5s; -ms-անցում` անթափանցիկություն .5s; -o-անցում` անթափանցիկություն .5s; անցում` անթափանցիկություն .5s;) .վերածում` թիրախ (տեսանելիություն` տեսանելի; անթափանցիկություն` 1;) աջ՝ 0; ներքևում՝ 0; ձախ՝ 0; էկրան՝ բլոկ; լուսանցք՝ ավտոմատ; լայնություն՝ 100%, բարձրություն՝ ավտոմատ; / * ներկառուցված պատկերների անկյունների կլորացում * / -webkit-border-radius՝ 4px; -moz - border-radius՝ 4px; -ms-border-radius՝ 4px; border-radius՝ 4px;) / * ներկառուցված m-media տարրեր, շրջանակներ * / embed, iframe (վերևում՝ 0; աջ՝ 0; ներքևում՝ 0; ձախ՝ 0, էկրան՝ բլոկ, լուսանցք՝ ավտոմատ, նվազագույն լայնություն՝ 320 px, առավելագույն լայնություն՝ 600 px, լայնություն՝ 100%;) .popup h1 (/ * վերնագիր 1 * / գույնը՝ # 008000; տեքստի հավասարեցում՝ ձախ տեքստ-ստվեր՝ 0 1p x 3px rgba (0,0,0, .3); տառատեսակը՝ 24px «Trebuchet MS», Helvetica, sans-serif; տառատեսակի քաշը՝ թավ; ) .popup h2 (/ * վերնագիր 2 * / գույն՝ # 008000; տեքստի հավասարեցում՝ ձախ; տեքստի ստվերում՝ 0 1px 3px rgba (0,0,0, .3); տառատեսակը՝ 22px «Trebuchet MS», Helvetica , sans-serif;) / *** Ձևավորել մոդալ պատուհանների ոճերը *** / .թռուցիկ (վերևում՝ 0; աջ՝ 0; ձախ՝ 0; տառաչափ՝ 14px; z-ինդեքս՝ 10; ցուցադրում՝ արգելափակում; տեսանելիություն թաքնված; լուսանցք՝ 0 ավտոմատ; լայնություն՝ 90%, նվազագույն լայնություն՝ 320 px; առավելագույն լայնություն՝ 600 px; / * ֆիքսված դիրքավորում, պատուհանը կայուն է ոլորելիս */ դիրքը՝ ֆիքսված; լիցք՝ 15px; եզրագիծ՝ 1px ամուր # 383838 ; / * կլորացված անկյուններ * / -webkit-border-radius՝ 4px; -moz-border-radius՝ 4px; * արտաքին տուփ-ստվեր * / -webkit-box-shadow: 0 0 6px rgba (0, 0, 0, 0.8); -moz-box-shadow: 0 0 6px rgba (0, 0, 0, 0.8); - ms-box -shadow՝ 0 0 6px rgba (0, 0, 0, 0.8); -o-box-shadow՝ 0 0 6px rgba (0, 0, 0, 0.8); box-shadow՝ 0px 0px 6px rgba ( 0, 0, 0, 0.8); / * պատուհանի ամբողջական թափանցիկություն, որը հայտնվում է սեղմման վրա * / անթափանցիկություն. 0; / * անցումային էֆեկտ (հայտնվում է) * / -webkit-transiti on: all ease .5s; -moz-անցում. բոլոր հեշտությունը .5s; -ms-անցում. բոլոր հեշտությունը .5s; -o-անցում. բոլոր հեշտությունը .5s; անցում. բոլոր հեշտությունը .5s; ) / * հնարավորություն է տալիս պատուհանը երևալ և մգացնել ֆոնը * / .overlay: target + .popup (վերևում՝ 20%; / * պատուհանի դիրքը էջի վերևից, երբ այն հայտնվում է * / տեսանելիություն՝ տեսանելի, անթափանցիկություն. 1; / * հեռացնել թափանցիկությունը * /) / * ձևավորել փակման կոճակը * / .close (դիրքը՝ բացարձակ; վերև՝ -10px; աջ՝ -10px; ներդիր՝ 0; լայնությունը՝ 20px; բարձրությունը՝ 20px; եզրագիծը՝ 2px ամուր #cccc; -webkit-border-radius՝ 15px; -moz-border-radius՝ 15px; -ms-border-radius՝ 15px; (61, 61, 61, 0. ութ); -webkit-box-shadow: 0px 0px 10px # 000; -moz-box-shadow: 0px 0px 10px # 000; տուփ-ստվեր՝ 0px 0px 10px # 000; տեքստի հավասարեցում. կենտրոն; տեքստ-դեկորացիա՝ ոչ մի; տառատեսակի քաշը՝ թավ; գծի բարձրությունը՝ 20px; / * սահմանել արժեքներ և անցումային էֆեկտ սավառնելիս * / -webkit-transition. all ease .8s; -moz-անցում. բոլոր հեշտությունը .8s; -ms-անցում. բոլոր հեշտությունը .8s; -o-անցում. բոլոր հեշտությունը .8s; անցում. բոլոր հեշտությունը .8s; ) .close՝ առաջ (գույնը՝ rgba (255, 255, 255, 0.9); բովանդակությունը՝ «X», տեքստի ստվերը՝ 0 -1px rgba (0, 0, 0, 0.9); տառաչափը՝ 12px;) .փակել՝ սավառնել (ֆոնի գույնը՝ rgba (252, 20, 0, 0.8); / * պտտել կոճակը սավառնողի վրա * / -webkit-transform՝ պտտել (360 աստիճան); -moz-փոխակերպել՝ պտտել (360 աստիճան); - ms -փոխակերպում. պտտել (360 աստիճան); -o-փոխակերպում. պտտել (360 աստիճան); փոխակերպում. պտտել (360 աստիճան);) / * ընտրովի է հավելվածներ ավելացնելիս * / .popup p, .popup div (լուսանցք-ներքև՝ 10px;)

Ինչպես տեսնում ես Սիրելի բարեկամներ, ամեն ինչ բավականին պարզ է և առանց ավելորդ խառնաշփոթի: Եթե ​​ամեն ինչ ճիշտ եք անում, ձեր զինանոցում կստանաք հիանալի մոդալային թռուցիկ պատուհան, որտեղ կարող եք տեղադրել ցանկացած բովանդակություն՝ լինի դա տեքստային բովանդակություն, լուսանկարներ, գրանցման տարբեր ձևեր և հետադարձ կապ, կամ տեսանյութ ցանկացած երրորդ կողմի աղբյուրից: Փորձեք պարամետրերի հետ, փոփոխեք պատուհանը ձեր սրտի ուզածով և, հնարավորության դեպքում, մեկնաբանություններում կիսվեք ձեր լավագույն փորձով, ինչպես նաև հանկարծակի ծագած խնդիրներով:

Մեր օրերում տարբեր կայքերի համար բոլոր տեսակի թռուցիկ մոդալ պատուհաններ - թռուցիկներ - գրանցման, թույլտվության, տեղեկատվական պատուհաններ, - բոլոր տեսակի ձևերն ու չափերը դարձել են նորմ: Բացի jQuery-ի համար կան նաև հսկայական թվով պլագիններ: պարզ և հարմար ստեղծագործություննման թռուցիկներ - նույն Shadowbox-ը, օրինակ:

Նման թռուցիկների տեսքը, չափը և դիզայնը լիովին բազմազան են՝ ծածկույթներով, ստվերներով, անիմացիաներով՝ պարզապես անթիվ: Նրանց միավորում է, հավանաբար, այն փաստը, որ դրանք սովորաբար ցուցադրվում են էջի հենց կենտրոնում՝ և՛ հորիզոնական, և՛ ուղղահայաց: Իսկ կենտրոնացումը կատարվում է JS-ի միջոցով։ Ես չեմ խորանա այս հաշվարկների մանրամասների մեջ, դրանք միայն հակիրճ նկարագրեմ.

Թռուցիկ HTML կոդը սովորաբար ունի հետևյալ կառուցվածքը.

- Բովանդակությամբ թռուցիկ ->

Եվ CSS ( այստեղ և ներքևում ես միտումնավոր բաց կթողնեմ որոշ հատկությունների գրելը, որոնք անհրաժեշտ են միայն որոշ բրաուզերների և դրանց տարբերակների համար՝ թողնելով միայն ամենահիմնականը։):

Բացվող__վերածում (
դիրքը `ֆիքսված;
ձախ: 0;
վերև՝ 0;
ֆոն՝ # 000;
անթափանցիկություն՝ .5;
զտիչ՝ ալֆա (անթափանցություն = 50);
z-ինդեքս՝ 999
}
.թռուցիկ (
դիրքը` բացարձակ;
լայնությունը՝ 20%;
z-ինդեքս՝ 1000;
եզրագիծը՝ 1px կոշտ #ccc;
ֆոն՝ #fff
}

JS-ը որոշում է բրաուզերի և բրաուզերի տարբերակը, և դրա հիման վրա հաշվարկում է աշխատանքային տարածքի չափը և ելնող պատուհանի չափը (եթե դրանք նշված չեն), այնուհետև կատարվում են նրա վերին ձախ անկյունի դիրքի պարզ հաշվարկներ: (css հատկությունները մնացել են և վերևում .popup-ի համար): Շատ պլագիններ նույնպես արձագանքում են էջի չափափոխմանը, ամեն անգամ վերահաշվարկելով ամբողջը, որպեսզի թռուցիկը գտնվի հենց աշխատանքային տարածքի կենտրոնում:

Ես բնավորությամբ պերֆեկցիոնիստ եմ (գիտեմ, երբեմն դա վատ է), և հաճախ անհանգստանում եմ նույնիսկ մանր դետալների համար՝ փորձելով կատարելագործվել և ավելացնել առավելագույն հնարավոր ընդարձակելիություն այս մանրամասներին, և ես չէի կարող չկախվել հենց այս պահին: այս բոլոր պլագինների աշխատանքում: Միտք առաջացավ, որ թռուցիկ պատուհանի տեղադրման հետ կապված ամբողջ աշխատանքը կարող է տեղափոխվել JS-ի ուսերից դեպի բրաուզերի ուսերը, այսինքն՝ այս աշխատանքը կարելի է կատարել CSS-ի միջոցով։

Ահա թե ինչ ենք անելու։

Ստորև ես կտամ թռուցիկի օրինակ, որն աշխատում է հիմնական բրաուզերների բոլոր հիմնական տարբերակներում: Որպեսզի այն ճիշտ աշխատի IE-ում<9 необходима некоторая экстра-разметка и хаки, потому детальное описание написания такого метода я опущу, а для интересующихся выложу полную версию.

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

Սկսենք HTML կոդից։ Դրա կառուցվածքը փոքր-ինչ կտարբերվի վերը նշված ծածկագրից, ինչու՞ - այս մասին ավելին ստորև հոդվածում. տարրերի դասերը կմնան նույնը.

< div class ="popup__overlay">
< div class ="popup">

Եվ որոշ CSS:

Բացվող__վերածում (
դիրքը `ֆիքսված;
ձախ: 0;
վերև՝ 0;
լայնությունը՝ 100%;
բարձրությունը՝ 100%;
z-ինդեքս՝ 999
}
.թռուցիկ (
}

Ֆիքսված չափսեր

Ամենահեշտ տարբերակը. Պետք չէ որևէ նոր բան հորինել.

Թռուցիկ պատուհան (
ձախ: 50%;
վերև՝ 50%;
լայնությունը՝ 400px;
բարձրությունը՝ 200px;
լուսանցք-ձախ՝ -200px;
լուսանցք՝ -100px
}

Կես լայնության և բարձրության բացասական լուսանցքները չնչին և ձանձրալի են, դրա մասին ոչ մի օրիգինալ բան չկա:

Բացվող պատուհանների չափերը կախված են բովանդակությունից

Նախ, հորիզոնական հավասարեցումն ավելի հեշտ է թվում: Եթե ​​թռուցիկն ունի ֆիքսված լայնություն, ապա հետևյալը բավարար կլինի.

Թռուցիկ պատուհան (
լուսանցք: Ավտո
}

Սա ոչ մի կերպ չի ազդի ուղղահայաց հավասարեցման վրա, և, ի դեպ, եթե ձեզ միայն հորիզոնական հավասարեցում է անհրաժեշտ, ապա կարող եք կանգ առնել այնտեղ՝ նշելով թռուցիկ պատուհանի վերևի մի այլ լուսանցք: Բայց սա մեզ քիչ է։ Շարունակիր.

Ուղղահայաց հավասարեցում. Ահա թե որտեղ է այն դառնում հետաքրքիր: Իհարկե, աղյուսակը կամ աղյուսակի էմուլյացիան՝ օգտագործելով display. table & display: table-cell-ը, առանց որևէ խնդրի կհաղթահարի նման առաջադրանքը, բայց հին IE-ում այս աշխատանքը ավելի թանկ արժե: Աղյուսակը նույնպես անհետանում է `հասկանալի պատճառներով:

Այսպիսով, մարժան արդեն բացակայում է, մենք չգիտենք չափերը: Հիշենք, թե ինչ հատկություններ ունեն նմանատիպ էֆեկտներ: Այո, տեքստի հավասարեցում: Բայց միայն ներկառուցված տարրերի համար: ԼԱՎ. Թվում է, թե Աստված ինքն է հրամայել օգտագործել ցուցադրումը. inline-block - բլոկ տարր, որի վրա կարելի է կիրառել ներգծային տարրերի հատկությունները: Այս հատկության աջակցությամբ բոլոր բրաուզերներում նույնպես ամեն ինչ, կարելի է ասել, կարգին է: Կոդը դառնում է այսպիսին.

Բացվող__վերածում (
դիրքը `ֆիքսված;
ձախ: 0;
վերև՝ 0;
լայնությունը՝ 100%;
բարձրությունը՝ 100%;
z-ինդեքս՝ 999;
տեքստի հավասարեցում՝ կենտրոն
}
.թռուցիկ (
ցուցադրում՝ inline -block;
ուղղահայաց հարթեցում` միջին
}

Մնում է ուղղահայաց հավասարեցում - ուղղահայաց հավասարեցումը մեզ համար լավ է: Ցանկացած այլ իրավիճակում նույնպես տեղին կլինի օգտագործել տողի բարձրությունը, բայց քանի որ մենք չունենք էջի ֆիքսված բարձրություն (այս համատեքստում տող-բարձրություն), մենք չենք կարող այն օգտագործել այստեղ։ Մեկ հնարք գալիս է օգնության անհայտ չափերի տարրերի ուղղահայաց դասավորմամբ: Ես հստակ հիշում եմ, որ ես գտա այս մեթոդը Habré-ում, բայց, ցավոք, չկարողացա գտնել այդ թեմայի հղումը։ Այս մեթոդը բաղկացած է հետևյալից. ավելացվում է զրոյական լայնությամբ և ծնողի 100% բարձրությամբ inline-block տարր, որը «ընդլայնում է» տողի բարձրությունը մինչև ծնողի բարձրության 100%, այսինքն՝ մինչև էջի աշխատանքի բարձրությունը։ տարածք։ Եկեք այն ավելի էլեգանտ դարձնենք՝ ավելորդ նշագրման փոխարեն օգտագործելով կեղծ տարրեր.

Բացվող__վերածում. հետո (
ցուցադրում՝ inline -block;
լայնությունը՝ 0;
բարձրությունը՝ 100%;
ուղղահայաց հարթեցում `միջին;
բովանդակությունը՝ ""
}

Մնում է ավելացնել կիսաթափանցիկ ծածկույթի մգացում - rgba-ն կկարգավորի դա: Ամեն ինչ! Այժմ թռուցիկ պատուհանի դիրքը վերահսկվում է միայն բրաուզերի կողմից CSS մակարդակում:

Այս դասում ես գաղտնիք չեմ բացահայտի դասավորության փորձառու դիզայներների և css գուրուների համար, բայց այս հոդվածը օգտակար կլինի սկսնակների համար: այստեղ դուք կարող եք սովորել, թե ինչպես ստեղծել թռուցիկներ ձեր ամբողջ կայքի վերևում:

Ամենից հաճախ նման պատուհանները հայտնվում են կայքում որոշակի գործողություններ կատարելուց հետո, օրինակ՝ օգտատերը սեղմում է «Request a call back» հղման վրա, և նրա դիմաց հայտնվում է պատվերի ձևաթուղթ։

Շատ հարմար է օգտագործել PopUp պատուհանները ajax-ի հետ համատեղ, բայց սա մեկ այլ դասի թեմա է։

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

հետ շփման մեջ

Ֆեյսբուք

Twitter

Կարծում եմ՝ բավականաչափ պատճառներ կան՝ սկսելու ուսումնասիրել հարցը՝ ինչպես ստեղծել PopUp թռուցիկ ձեր կայքում:

Խնդրի հայտարարություն (TOR)

Դուք պետք է ստեղծեք թռուցիկ պատուհան ամբողջ կայքի վերևում մթնեցնող էկրանով:

Լուծում

Մեթոդ 1

html

css

* (տառատեսակ-ընտանեկան՝ Areal;) .b-կոնտեյներ (լայնությունը՝ 200px; բարձրությունը՝ 150px; ֆոնի գույնը՝ #cccc; լուսանցք՝ 0px ավտոմատ; լիցք՝ 10px; տառատեսակի չափը՝ 30px; գույնը՝ #fff;) .b-popup (լայնությունը՝ 100%; բարձրությունը՝ 2000px; ֆոնի գույնը՝ rgba (0,0,0,0.5); հորդառատ՝ թաքնված; դիրքը՝ ֆիքսված; վերևում՝ 0px;) .b-popup .b-popup -բովանդակություն (լուսանցք՝ 40px ավտոմատ 0px ավտոմատ; լայնություն՝ 100px; բարձրություն՝ 40px; լիցք՝ 10px; ֆոնի գույն՝ # c5c5c5; եզրագծի շառավիղ՝ 5px; տուփ ստվեր՝ 0px 0px 10px # 000;)

Արդյունք:

Շատ հաճախ առաջարկվում է օգտագործել.

Դիրքը՝ բացարձակ;
Այո, արդյունքը նույնն է, բայց շնորհիվ այն բանի, որ մենք սահմանել ենք «ստվերում» բլոկի բարձրությունը, հայտնվում են ոլորման գծեր։ Այդ իսկ պատճառով այս մեթոդը հարմար չէ։

Մեթոդ 2

Այս մեթոդը կտրուկ չի տարբերվում 1-ին մեթոդից, բայց ես այն ավելի հարմար եմ համարում:

Html (անփոփոխ)

Css

* (տառատեսակ-ընտանեկան՝ Areal;) .b-կոնտեյներ (լայնությունը՝ 200px; բարձրությունը՝ 150px; ֆոնի գույնը՝ #cccc; լուսանցք՝ 0px ավտոմատ; լիցք՝ 10px; տառատեսակի չափը՝ 30px; գույնը՝ #fff;) .b-popup (լայնությունը՝ 100%, մին-բարձրությունը՝ 100%, ֆոնի գույնը՝ rgba (0,0,0,0,5); հորդառատ՝ թաքնված, դիրքը՝ ֆիքսված, վերև՝ 0px;) .b-բացվող: b-popup-content (լուսանցք՝ 40px auto 0px auto; լայնությունը՝ 100px; բարձրությունը՝ 40px; padding՝ 10px; ֆոնի գույնը՝ # c5c5c5; եզրագծի շառավիղը՝ 5px; box-shadow՝ 0px 0px 10px;) #0

Արդյունքը նման է

Գույքի շնորհիվ. min-բարձրությունը՝ 100%;մեր բլոկի «մթնումը» ձեռք է բերել 100% լայնություն և նվազագույն բարձրությունէկրանի 100%-ով:

Միակ թերությունը այս մեթոդըդա է Internet Explorerաջակցում է այս հատկությունը միայն 8.0 տարբերակից:

Կախարդություն ավելացնելով Jquery-ին

Հիմա եկեք ավելացնենք հղումներ՝ մեր թռուցիկ պատուհանը թաքցնելու/ցուցադրելու համար:

Դա անելու համար դուք պետք է միացնեք JQuery գրադարանը և մի փոքր սցենար.

Նաև Html-ը պետք է թարմացվի.

Արդյունք

Այժմ, երբ էջը բեռնվի, PopUp-ը կվերանա:

Արդյունքը կարող եք տեսնել այստեղ։

Այս դասում ես գաղտնիք չեմ բացահայտի դասավորության փորձառու դիզայներների և css գուրուների համար, բայց այս հոդվածը օգտակար կլինի սկսնակների համար: այստեղ դուք կարող եք սովորել, թե ինչպես ստեղծել թռուցիկներ ձեր ամբողջ կայքի վերևում:

Ամենից հաճախ նման պատուհանները հայտնվում են կայքում որոշակի գործողություններ կատարելուց հետո, օրինակ՝ օգտատերը սեղմում է «Request a call back» հղման վրա, և նրա դիմաց հայտնվում է պատվերի ձևաթուղթ։

Շատ հարմար է օգտագործել PopUp պատուհանները ajax-ի հետ համատեղ, բայց սա մեկ այլ դասի թեմա է։

Համացանցում սկսում են ավելի ու ավելի շատ վեբ ռեսուրսներ հայտնվել, որոնք օգտագործում են թռուցիկ պատուհաններ: Օրինակ՝ ծանոթ սոցիալական ցանցերը։ Սքրինշոթերից բոլոր ավելորդ տվյալները հեռացվել են:

հետ շփման մեջ

Ֆեյսբուք

Twitter

Կարծում եմ՝ բավականաչափ պատճառներ կան՝ սկսելու ուսումնասիրել հարցը՝ ինչպես ստեղծել PopUp թռուցիկ ձեր կայքում:

Խնդրի հայտարարություն (TOR)

Դուք պետք է ստեղծեք թռուցիկ պատուհան ամբողջ կայքի վերևում մթնեցնող էկրանով:

Լուծում

Մեթոդ 1

html

css

* (տառատեսակ-ընտանեկան՝ Areal;) .b-կոնտեյներ (լայնությունը՝ 200px; բարձրությունը՝ 150px; ֆոնի գույնը՝ #cccc; լուսանցք՝ 0px ավտոմատ; լիցք՝ 10px; տառատեսակի չափը՝ 30px; գույնը՝ #fff;) .b-popup (լայնությունը՝ 100%; բարձրությունը՝ 2000px; ֆոնի գույնը՝ rgba (0,0,0,0.5); հորդառատ՝ թաքնված; դիրքը՝ ֆիքսված; վերևում՝ 0px;) .b-popup .b-popup -բովանդակություն (լուսանցք՝ 40px ավտոմատ 0px ավտոմատ; լայնություն՝ 100px; բարձրություն՝ 40px; լիցք՝ 10px; ֆոնի գույն՝ # c5c5c5; եզրագծի շառավիղ՝ 5px; տուփ ստվեր՝ 0px 0px 10px # 000;)

Արդյունք:

Շատ հաճախ առաջարկվում է օգտագործել.

Դիրքը՝ բացարձակ;
Այո, արդյունքը նույնն է, բայց շնորհիվ այն բանի, որ մենք սահմանել ենք «ստվերում» բլոկի բարձրությունը, հայտնվում են ոլորման գծեր։ Այդ իսկ պատճառով այս մեթոդը հարմար չէ։

Մեթոդ 2

Այս մեթոդը կտրուկ չի տարբերվում 1-ին մեթոդից, բայց ես այն ավելի հարմար եմ համարում:

Html (անփոփոխ)

Css

* (տառատեսակ-ընտանեկան՝ Areal;) .b-կոնտեյներ (լայնությունը՝ 200px; բարձրությունը՝ 150px; ֆոնի գույնը՝ #cccc; լուսանցք՝ 0px ավտոմատ; լիցք՝ 10px; տառատեսակի չափը՝ 30px; գույնը՝ #fff;) .b-popup (լայնությունը՝ 100%, մին-բարձրությունը՝ 100%, ֆոնի գույնը՝ rgba (0,0,0,0,5); հորդառատ՝ թաքնված, դիրքը՝ ֆիքսված, վերև՝ 0px;) .b-բացվող: b-popup-content (լուսանցք՝ 40px auto 0px auto; լայնությունը՝ 100px; բարձրությունը՝ 40px; padding՝ 10px; ֆոնի գույնը՝ # c5c5c5; եզրագծի շառավիղը՝ 5px; box-shadow՝ 0px 0px 10px;) #0

Արդյունքը նման է

Գույքի շնորհիվ. min-բարձրությունը՝ 100%;մեր բլոկի «մթնումը» ձեռք է բերել 100% լայնություն և նվազագույն բարձրությունէկրանի 100%-ով:

Այս մեթոդի միակ թերությունն այն է, որ Internet Explorer-ն աջակցում է այս հատկությունը միայն 8.0 տարբերակից:

Կախարդություն ավելացնելով Jquery-ին

Հիմա եկեք ավելացնենք հղումներ՝ մեր թռուցիկ պատուհանը թաքցնելու/ցուցադրելու համար:

Դա անելու համար դուք պետք է միացնեք JQuery գրադարանը և մի փոքր սցենար.

Նաև Html-ը պետք է թարմացվի.

Արդյունք

Այժմ, երբ էջը բեռնվի, PopUp-ը կվերանա:

Արդյունքը կարող եք տեսնել այստեղ։

Գործառույթների առումով պարզ մոդալ պատուհան, որն ամբողջությամբ գործարկված է մաքուր CSS-ով, որտեղ կարող եք տեղադրել տարբեր գործառույթների տակ՝ կանչվելու համար կայքում։ Հավանաբար սա այն շատերից մեկն է, որին ես հանդիպեցի մոդալ պատուհանների ընտրության ժամանակ՝ իր շագանակագեղձի կարգավորումներով, բայց նաև տեղադրման համար։ Բայց գլխավորը նրա ֆունկցիոնալությունն է, որը չի զիջի մյուսներին։ Նաև լռելյայն այն պատրաստված է բաց ստվերի տակ, որտեղ աջ կողմում վերին անկյունկոճակը դրված է, խաչի տեսքով։

Որը կգնա անջատելու գործառույթին, կամ պարզապես կադրը անհետացնելու համար, որտեղ նույնիսկ այս փոքրիկ տարրի վրա ազդեցություն կա գունային գունապնակը փոխելու վրա: Այժմ վեբ-վարպետը կարող է տեղադրել այն կայքում և տեղադրել նկարագրություն կամ օպերատորներ, որոնք կարող են ցուցադրել տարբեր կատեգորիաներ, ինչպիսիք են վիճակագրությունը կամ տեղեկատուները:

Բայց փաստն այն է, որ եթե դուք ունեք ռեսուրսի մութ ոճ, ապա ոճով դուք կարող եք արագ փոխել սանդղակը, ավելի ճիշտ, հարմարեցնել այն բնօրինակ դիզայնին: Ահա մեկը ստանդարտ մեթոդներթե ինչպես պետք է անել մաքուր cssդեպի մոդալ պատուհան, որը կբացվի, երբ կոճակը սեղմվի HTML խարիսխով հղման տակ: Կոճակն ինքնին ավելի շատ տեսանելիության համար է, որտեղ ոճերում կմնա մեկ դասի հեռացում և անունը, որը կարող է տեղադրվել նավիգացիայի մեջ կամ կառավարման վահանակում, որտեղ գտնվում է հիմնական ֆունկցիոնալությունը կամ կայքի նավիգացիան:

Սա այն դեպքում, երբ ստուգեք, որ ամեն ինչ լավ է աշխատում.

Տեղադրման սկիզբը.

Կոճակով պատուհան

CSS

Բուտքսատոն-սատոկավատե (
ցուցադրում: inline-block;
տեքստ-դեկորացիա՝ ոչ մի;
լուսանցք-աջ՝ 7px;
սահման-շառավիղ` 5px;
լիցք՝ 7px 9px;
ֆոն՝ # 199a36;
գույնը՝ # fbf7f7! կարևոր;
}

Անելումեն (
ցուցադրում: flex;
դիրքը `ֆիքսված;
ձախ: 0;
վերև՝ -100%;
լայնությունը՝ 100%;
բարձրությունը՝ 100%;
align-իրեր՝ կենտրոն;
հիմնավորում-բովանդակություն՝ կենտրոն;
անթափանցիկություն՝ 0;
-webkit-անցում. վերին 0s .7s, անթափանցիկություն .7s 0s;
անցում. վերին 0s .7s, անթափանցիկություն .7s 0s;
}

Անելումեն՝ թիրախ (
վերև՝ 0;
անթափանցիկություն՝ 1;
-webkit-անցում. ոչ մեկը;
անցումը՝ ոչ մի;
}

Անելումենի գործիչ (
լայնությունը՝ 100%;
առավելագույն լայնությունը՝ 530px;
պաշտոնը` հարաբերական;
լիցք՝ 1,8 մ;
անթափանցիկություն՝ 0;
ֆոնի գույնը՝ սպիտակ;
-webkit-անցում. անթափանցիկություն .7s;
անցումը՝ անթափանցիկություն .7s;
}

Anelumen.lowingnuska գործիչ (
ֆոն՝ # f9f5f5;
սահման-շառավիղ` 7px;
padding-top՝ 8px;
եզրագիծը՝ 3px կոշտ #aaabad;
}

Anelumen.lowingnuska նկար h2 (
լուսանցք-վերև: 0;
padding-stop: 3px;
եզրագիծ-ներքև. 1px կոշտ # dcd7d7;
}

Անելումեն՝ նպատակային գործիչ (
անթափանցիկություն՝ 1;
}

Anelumen.lowingnuska .compatibg-ukastywise (
տեքստ-դեկորացիա՝ ոչ մի;
դիրքը` բացարձակ;
աջ: 8px;
վերև՝ 0px;
տառաչափը՝ 41px;
}

Anelumen .nedismiseg (
ձախ: 0;
վերև՝ 0;
լայնությունը՝ 100%;
բարձրությունը՝ 100%;
դիրքը `ֆիքսված;
ֆոնի գույնը՝ rgba (10, 10, 10, 0.87);
բովանդակությունը՝ «»;
կուրսորը՝ լռելյայն;
տեսանելիություն՝ թաքնված;
-webkit-անցում. բոլոր .7s;
անցումը՝ բոլոր .7s;
}

Անելում. թիրախ .nedismiseg (
տեսանելիություն՝ տեսանելի;
}

Դուք նաև պետք է տեղյակ լինեք, որ CSS ոճավորումը և կեղծ դասը մեկն է այններից, որոնք լիովին չեն օգտագործվում CSS-ի առանձնահատկությունների կողմից բազմաթիվ հետաքրքիր պոտենցիալ հավելվածներով:

Այն սկսվում է, երբ URLէջը համապատասխանում է իր տարրի նույնացուցիչին, կամ դուք կարող եք այն այլ կերպ դնել, սա այն դեպքում, երբ օգտվողը ցատկում է էջի որոշակի տարր: