Модальды терезелер веб-шебердің арсеналында жиі қолданылатын құрал болып табылады. Ол шешуге өте қолайлы үлкен мөлшертіркеу пішіндерін, жарнама бірліктерін, хабарламаларды және т.б. көрсету сияқты тапсырмалар.

Бірақ, маңызды орынға қарамастан ақпараттық қолдауЖобада модальды терезелер әдетте JavaScript тілінде жүзеге асырылады, олар функционалдылықты кеңейту немесе кері үйлесімділікті қамтамасыз ету кезінде қиындықтар тудыруы мүмкін.

HTML5 және CSS3 модальды терезелерді жасауды керемет жеңілдетеді.

HTML белгілеу

Модальды терезені құрудың бірінші қадамы қарапайым және тиімді белгілеу болып табылады:

Модальды терезені ашыңыз

div элементінің ішінде Модальды терезенің мазмұны орналастырылған. Сондай-ақ терезені жабу үшін сілтеме беру керек. Мысалы, қарапайым тақырыпты және бірнеше абзацтарды орналастырайық. Біздің мысал үшін толық белгілеу келесідей болады:

Модальды терезені ашу X Модальдық терезе

CSS3 көмегімен жасауға болатын қарапайым модальды терезенің мысалы.

Оны хабарламаларды көрсетуден бастап тіркеу формаларына дейін кең ауқымда пайдалануға болады.

Стильдер

Класс құру modalDialogжәне қалыптаса бастайды сыртқы түрі:

ModalDialog (позиция: бекітілген; қаріптер тобы: Arial, Helvetica, sans-serif; жоғарғы: 0; оң жақта: 0; төменгі: 0; сол жақта: 0; фон: rgba(0,0,0,0,8); z-индекс : 99999; -webkit-өткізу: бұлыңғырлық 400 мс жеңілдігі;

Біздің терезенің тұрақты орны болады, яғни бетті қашан айналдырсаңыз, ол төмен жылжиды терезені ашу. Сондай-ақ, біздің қара фон бүкіл экранды толтыру үшін кеңейеді.

Фон шамалы мөлдірлікке ие болады және мүлікті пайдалану арқылы барлық басқа элементтердің үстіне орналастырылады. z-индекс.

Соңында, біз модальды тереземізді көрсету үшін ауысуларды орнатамыз және оны белсенді емес күйде жасырамыз.

Мүмкін сіз мүлікті білмеуіңіз мүмкін көрсеткіш-оқиғалар, бірақ ол элементтердің тінтуірді басқандарына қалай әрекет ететінін басқаруға мүмкіндік береді. Біз мәнді оның мәніне сынып үшін орнаттық modalDialog, өйткені жалған класс белсенді болғанда сілтеме тінтуірдің шертулеріне жауап бермеуі керек ":мақсат".

Енді біз жалған класс қосамыз :мақсатжәне модальды терезе үшін стильдер.

ModalDialog:мақсатты (дисплей: блок; көрсеткіш-оқиғалар: авто; ) .modalDialog > div (ені: 400px; орны: салыстырмалы; жиегі: 10% авто; толтыру: 5px 20px 13px 20px; шекара радиусы: 10px; фон: # fff: -moz-linear-gradient(#fff, #999); )

Псевдо класс мақсатэлементтің көрсету режимін өзгертеді, сондықтан сілтеме басылғанда біздің модальды тереземіз көрсетіледі. Біз сондай-ақ меншік мәнін өзгертеміз көрсеткіш-оқиғалар.

Модальды терезенің ені мен беттегі орнын анықтаймыз. Сондай-ақ фон мен дөңгелектелген бұрыштар үшін градиентті анықтаймыз.

Терезені жабу

Енді біз терезені жабу функциясын енгізуіміз керек. Түйменің сыртқы түрін қалыптастыру:

Жабу (фон: #606061; түс: #FFFFFF; жол биіктігі: 25 пиксель; орны: абсолютті; оң жақта: -12 пиксель; мәтінді туралау: ортасына; жоғарғы: -10px; ені: 24px; мәтінді безендіру: жоқ; шрифт- салмақ: bold; -webkit-border-radius: 12px; -moz-box-shadow: 1px 3px #000; : меңзерді апарыңыз (фон: #00d9ff; )

Түйме үшін біз фон мен мәтін орнын орнатамыз. Содан кейін түймені орналастырып, оны жақтауды дөңгелектеу қасиеті арқылы дөңгелектеп, жеңіл көлеңке қалыптастырамыз. Тінтуірді түйменің үстіне апарсаңыз, фон түсін өзгертеміз.

Модальдер, қабаттасулар, диалогтар, оларды қалай атасаңыз да, осы UI үлгісін қайта қарастыратын кез келді. Олар алғаш рет сахнаға шыққанда, модальдар пайдаланушы интерфейсі мәселесінің талғампаз шешімі болды. Біріншіден, олар пайдаланушы интерфейсін жеңілдетеді. Екіншіден, экран кеңістігін үнемдеу. Содан бері дизайнерлер модальдарды оңай қабылдады, ал кейбіреулері оларды шектен тыс қабылдады. Модальдар қорқынышты қалқымалы терезенің бүгінгі нұсқасына айналды. Пайдаланушылар модальды терезелерді тітіркендіргіш деп санайды және оларды инстинктивті және автоматты түрде жабуды үйренді.

Анықтамасы:

Модальды терезе - бұл қолданбаның негізгі терезесінің жоғарғы жағында орналасқан элемент. Ол негізгі терезені блоктайды, бірақ оны еншілес модальды терезенің артында көрінетін қалдырады. Пайдаланушылар модальды терезеге қайтып оралмас бұрын онымен әрекеттесуі керек ата-ана өтініші. — Wikipedia

Қолданылуы

Қажет кезде модальды терезені пайдалануға болады:

Пайдаланушының назарын аударыңыз

Пайдаланушының назарын маңыздырақ нәрсеге аудару үшін оның ағымдағы тапсырмасын үзгіңіз келгенде пайдаланыңыз.

Пайдаланушы енгізуін талап етеді

Пайдаланушыдан ақпарат алғыңыз келгенде пайдаланыңыз. Мысалы, тіркеу және рұқсат беру формасы.

Көрсету қосымша ақпаратконтексте

Негізгі беттің мәтінмәнін жоғалтпай қосымша ақпаратты көрсеткіңіз келсе пайдаланыңыз. Мысалы, үлкенірек кескіндерді немесе бейнелерді көрсету.

Қосымша ақпаратты көрсету (контекстен тыс)

Негізгі бетке тікелей қатысы жоқ ақпаратты немесе басқа беттерден «тәуелсіз» басқа параметрлерді көрсеткіңіз келгенде пайдаланыңыз. Мысалы, хабарландырулар.

Ескертпе: Қате туралы хабарларды, тапсырманың сәттілігі туралы хабарларды немесе ескерту хабарларын көрсету үшін модальдарды пайдаланбаңыз. Оларды бетте қалдырыңыз.

Модальды терезенің анатомиясы

Нашар орындалған қабаттасулар тапсырманы орындауға кедергі келтіруі мүмкін. Модальды терезе пайдаланушыларды мазаламайтынына көз жеткізу үшін мыналарды ескеріңіз:

1. Escape люк

Модальды терезені жабу жолын беру арқылы пайдаланушыларға қашу жолын беріңіз. Бұған келесі жолдармен қол жеткізуге болады:

• Бас тарту түймесі
• Жабу түймесі
• Escape кілті
• Терезенің сыртын басыңыз

Арнайы мүмкіндіктер туралы кеңес: Әрбір модальды терезеде сол терезені жабу үшін қол жетімді пернетақта басқаруы болуы керек. Мысалы, escape пернесі терезені жабуы керек.

2. Тақырып

Пайдаланушы контекстіне модальды тақырыппен беріңіз. Бұл пайдаланушыларға оның қайда екенін білуге ​​мүмкіндік береді, себебі олар кетпеген басты бет.

Tweet түймесін басқаннан кейін  — Модальды тақырып: Жаңа твит жасаңыз. Контекст береді.

Кеңес: Түймешік белгісі (модальды терезені іске қосатын) және модальды тақырып сәйкес келуі керек

3. Түйме

Түйме жапсырмаларында анық атаулар болуы керек. Бұл кез келген түймеге қолданылады. Модальды терезелер үшін «жабу» түймесі «жабу» түймешігінің белгішесі немесе «x» ретінде көрсетілуі керек.

Invision қолданбасында анық түйме белгішелері бар

Ескертпе: Түйме белгішесін шатастырмаңыз. Пайдаланушы әрекеттен бас тартқысы келсе және модальды терезе БАСҚА бас тарту түймешігімен бірге қалса, шатасу орын алады. «Мен бас тартудан бас тартамын ба? Әлде мен жалғастырамын ба?»

4. Көлемі мен орналасуын анықтау

Модальды терезе тым үлкен немесе тым кішкентай болмауы керек, тек оның өлшемі дұрыс болғанын қалайсыз. Мақсат - контекстті сақтау, сондықтан модальды терезе бүкіл экранды алып кетпеуі керек. Мазмұн үлгі терезесіне сәйкес болуы керек. Айналдыру жолағы қажет болса, жаңа бет жасауға болады.

• Орын — экранның жоғарғы жағында, себебі ішінде мобильді пішінМодальды терезе оның астына қойылса, жоғалып кетуі мүмкін.
• Өлшем — Үлгі терезесі экранының 50%-дан астамын пайдаланбаңыз.

5. Фокус

Модальды терезені ашқан кезде жарық жәшігінің әсерін пайдаланыңыз (фонды қараңғылау). Бұл модальды терезеге назар аударады және пайдаланушы басты бетпен әрекеттесе алмайтынын көрсетеді.

Арнайы мүмкіндіктер туралы кеңес: Пернетақта фокусын модальды терезеге орнатыңыз.

6. Пайдаланушы модальды терезені іске қосады

Қалқымалы модальды тереземен пайдаланушыларды таң қалдырмаңыз. Түймені басу, сілтемені орындау немесе опцияны таңдау сияқты пайдаланушы әрекетіне модальды терезені іске қосуға мүмкіндік беріңіз. Өздігінен ашылатын модальды терезелер пайдаланушыны таң қалдырады және олардың тез жабылуына себеп болады.

Кіру түймешігін басу арқылы туындаған модальды терезе Модальдық терезелер мобильді құрылғылар

Модалдар мен мобильді құрылғылар әдетте бірге жақсы жұмыс істемейді. Мазмұнды көру қиын, себебі модальдар тым үлкен, экранда тым көп орын алады немесе тым кішкентай. Құрылғы пернетақтасы және кірістірілген айналдыру жолақтары сияқты элементтерді қосыңыз. Пайдаланушылар модальды терезе өрісін ұстауға тырысып, саусақтарын жылжытып, масштабтай алады. Модальды терезелер үшін жақсырақ баламалар бар, сондықтан оларды мобильді құрылғыларда қолдануға болмайды.

Жақсы жасалған модаль — Facebook қол жетімділігі

Пернетақта

Модальды терезелерді жасау кезінде қол жетімді пернетақта басқару элементтерін қосуды ұмытпаңыз. Төмендегілерді қарастырыңыз:

Модальды терезені ашу — диалогтық терезені ашатын элемент пернетақтадан қолжетімді болуы керек.

Фокусты диалогтық терезеге жылжыту — Модальды терезе ашық болғанда, пернетақта фокусы диалогтық терезенің басына жылжытылуы керек.

Пернетақта фокусын басқару — Фокус диалогтық терезеге жылжытылғанда, диалогтық терезе жабылғанша оның ішінде «құлыптау» керек.

Диалогты жабу — Әр модальды терезеде сол терезені жабу үшін қол жетімді пернетақта басқару элементі болуы керек.

АРИЯ

Accessible Rich Internet Applications (ARIA) стандарты веб-мазмұн мен веб-қосымшалардың қолжетімділігін жақсарту жолдарын анықтайды.

Келесі ARIA тегтері қол жетімді модальды терезені жасау кезінде пайдалы болуы мүмкін: Рөл = «диалог», ария - жасырын, ария - белгі

Сондай-ақ көру қабілеті төмен пайдаланушыларды ескеріңіз. Олар пайдалана алады экран ұлғайтқыштарыэкран мазмұнын үлкейту үшін мониторларда. Ұлғайтқаннан кейін пайдаланушы экранның бір бөлігін ғана көре алады. Бұл жағдайда модальды терезелер мобильді құрылғылардағы сияқты көрсетіледі.

Қорытынды

Егер адамдар модальды терезелерді автоматты түрде жабуды үйренсе, неге оларды пайдаланғыңыз келеді?

Пайдаланушының назарын аудару, контекстті сақтау және пайдаланушы интерфейсін жеңілдету модальды терезелердің үлкен артықшылықтары болып табылады. Дегенмен, олардың кемшіліктері де бар, өйткені олар пайдаланушы тәжірибесін үзеді және мазмұнды модальды терезенің артына жасыру арқылы негізгі бетпен әрекеттесу мүмкін емес. Модальды терезе әрқашан жауап бола бермейді. Таңдау кезінде мыналарды ескеріңіз:

Бақылау тізімі

• Модальды терезелерді қашан көрсетеміз?
• Модальды терезелерді қалай көрсетеміз?
• Модальды терезелер неге ұқсайды?
• Біз қандай ақпаратты береміз және жинаймыз?

Модальды терезелер үшін балама UI құрамдас бөлігі бар: модальды емес немесе тост ретінде белгілі (Материалдық дизайнда Microsoft және Google қолданатын термин). Толығырақ білу үшін келесі жазбамды оқыңыз.

Маңызды хабарламаларды немесе сайтта жасалған жай ғана өзгертулерді көрсету үшін қалқымалы терезелерді пайдалануға болады. Қалқымалы терезелердің екі түрі бар: қалыпты және модальды.

Ескертпе: модальды терезелердің әдеттегі терезелерден айырмашылығы модальды терезе ашық болған кезде пайдаланушы модальды терезе жабылмайынша тораптың басқа элементтерімен әрекеттесе алмайды.

Модальды терезенің мысалын көре аласыз JavaScript көмегімен alert() әдісін қолдану.

Қалқымалы терезе

Қалқымалы терезені жасаудың бірінші қадамы элементті (немесе кез келген басқа элементті) жасау және оны стильдеу болып табылады:

Құжат тақырыбы .okno ( ені: 300 пиксель; биіктігі: 50 пиксель; мәтінді туралау: ортасына; толтыру: 15 пиксель; жиек: 3 пиксель тұтас #0000cc; жиек радиусы: 10px; түсі: #0000cc; ) Қалқымалы терезе!

Бұл қалқымалы терезе ретінде пайдаланылады. Енді біз оны көрсету сипатының none мәнін пайдаланып жасырамыз және басқан кезде қалқымалы терезенің пайда болуына себеп болатын сілтемені қосамыз:

Құжат тақырыбы #okno ( ені: 300 пиксель; биіктігі: 50 пиксель; мәтінді туралау: ортасына; толтыру: 15 пиксель; жиек: 3 пиксель тұтас # 0000 cc; жиек радиусы: 10 пиксель; түсі: # 0000 cc; дисплей: жоқ; ) #okno: мақсат (дисплей: блок;) Қалқымалы терезе!

Қоңыраудың қалқымалы терезесі Көру »

Pseudo-class:target көмегімен біз стильдерді таңдаймыз және шарланған элементке қолданамыз. Осылайша, сілтемені басқаннан кейін элементтің көрсету қасиетінің мәні ешбірден блокқа өзгереді.

Енді біз оны қалқымалы терезеге ұқсайтындай етіп беттің ортасына орналастыруымыз керек. Оны толығымен орналастырып, тігінен және көлденеңінен ортаға қойыңыз:

#okno (ені: 300 пиксель; биіктігі: 50 пиксель; мәтінді туралау: ортасына; толтыру: 15 пиксель; жиек: 3 пиксель тұтас # 0000 cc; жиек радиусы: 10 пиксель; түс: # 0000 cc; дисплей: жоқ; /*орын және орталық*/ позиция: абсолютті: 0 төменгі: 0;Келесі қадам

Беттің кез келген жерін немесе терезенің өзін басқан кезде терезені жасыру жүзеге асырылады. Ол үшін элементті элементтің ішіне орналастыру керек:

Қалқымалы терезе! Содан кейін элементті орналастырамыз

және оны терезенің бүкіл ені мен биіктігіне дейін созыңыз. Біз оны дисплейді орнаттық: жоқ; және оған сілтемені қайта бағыттаңыз:

Құжат тақырыбы #негізгі (дисплей: жоқ; орын: абсолютті; жоғарғы: 0; сол жақ: 0; ені: 100%; биіктік: 100%; ) #okno (ені: 300px; биіктік: 50px; мәтінді туралау: орталық; толтыру : 15px шекарасы: 3px қатты #0000cc; Қоңыраудың қалқымалы терезесі Көру » Дисплейді алып тастаңыз: элементтен ешбірі. (бұл енді қажет емес, өйткені біз қазір жасырып жатырмыз

). Нәтижесінде ата-ана

енді таңдауды бетке қайта бағыттау арқылы қалқымалы терезені жасырады.

Бұл қарапайым қалқымалы терезені жасауды аяқтайды.

Құжат тақырыбы #okno ( ені: 300 пиксель; биіктігі: 50 пиксель; мәтінді туралау: ортасына; толтыру: 15 пиксель; жиек: 3 пиксель тұтас # 0000 cc; жиек радиусы: 10 пиксель; түс: # 0000 cc; дисплей: жоқ; орын: абсолютті; жоғарғы жағы : 0 оң: 0; сол жақта: 0;

Қоңыраудың қалқымалы терезесі

Толық модальды терезені құрудың келесі қадамы - тереземізді жасыратын түймені қосу. Біз әдеттегі сілтемеден түймені жасаймыз, оны өзімізге қосып, оны жобалаймыз:
Құжат тақырыбы #okno ( ені: 300 пиксель; биіктігі: 50 пиксель; мәтінді туралау: ортасына; толтыру: 15 пиксель; жиек: 3 пиксель тұтас # 0000 cc; жиек радиусы: 10 пиксель; түс: # 0000 cc; дисплей: жоқ; орын: абсолютті; жоғарғы жағы : 0; сол жақта: 0; : #e6e6ff;)

Терезені жабу Қоңыраудың қалқымалы терезесін қолданып көріңіз »

Модальды терезені көрсету кезінде бетті күңгірттеу әсері үшін барлық бар терезе кодын қосымшаға орналастыру керек:
Қалқымалы терезе!

Терезені жабу

Ата-ананы орналастырып, оны терезенің бүкіл ені мен биіктігіне дейін созыңыз. Біз оны дисплейді орнаттық: жоқ; және оған қоңырау шалатын терезе сілтемесін қайта бағыттаңыз.

Бала үшін дисплейді алып тастаңыз: жоқ; (бұл енді қажет емес, себебі ата-ана оның ішінде барлығын жасырады). Нәтижесінде, енді ата-ана модальды терезені көрсетуге және бет фонын күңгірттеуге жауапты, ал бала терезенің өзін безендіруге ғана жауапты:
Құжат тақырыбы #zatemnenie (фон: rgba(102, 102, 102, 0,5); ені: 100%; биіктік: 100%; орны: абсолютті; жоғарғы: 0; сол жақта: 0; дисплей: жоқ; ) #okno ( ені: 300px text-align: 10px абсолютті: 0; фон: #fff жиек: 1px қатты #0000cc; фон: #f2f2f2;

Ескерту: егер пайдаланушы бетке кірген кезде бірден қалқымалы терезені көруі қажет болса (оны сілтеме арқылы шақырмау), онда бет мекенжайын терезе идентификаторымен бірге енгізу қажет (мысалы, мекенжай болуы мүмкін келесідей: site.ru/papka/documet html#window).

CSS көмегімен модальды терезені құру туралы мақалада модальды терезе дегеніміз не және ол не үшін қажет екенін қарастырдық. Біз сонымен қатар тек CSS көмегімен терезе жасадық. Бұл мақалада мен JavaScript модальды терезесін қалай жасау керектігін сипаттаймын. Нақтырақ айтқанда, біз жасау үшін jQuery кітапханасын қолданамыз.

Сонымен, jQuery-де модальды терезе құруды бастайық. Мәселені қиындату үшін келесі шартты қоямыз. Бізге жауап беретін модальды терезе жасау керек болады. Бейімделушілік экран өлшемі азайған кезде терезенің де кішірейетіндігінде болады. html белгілеуімен адаптивті jQuery модальды терезесін жасауды бастайық.

Мында басыңыз! X Қоңырауды сұрау

Менің ойымша, кодпен бәрі түсінікті. Бізде wrapper.wrapper бар, онда біздің сайттың мазмұны орналасқан. gowindow идентификаторы бар модальды терезені шақыру түймесі, modal_window идентификаторы бар терезенің өзі және қабаттасушы қабаттың қабаттасуы бар. Енді CSS стильдерін жазайық.

Қаптама ( ені: 100%; жиегі: авто; ені: авто;/*100% бірдей*/ максимум-ені: 960 пиксель;/*ораманың максималды ені*/ жиегі: 1px тұтас #000; фон түсі: # F5F9FB; ) .button( /*-------*/ ) #modal_window ( ені: 34%;/*жауап беру үшін*/ биіктік: 300px; жиек-радиусы: 10px; жиек: 3px #fff қатты; фондық : # e0e0e0; margin-left: 33% дисплей: жоқ; ; text-align: center; position: салыстырмалы; -index: 3000 /*жоғарыда, бірақ терезенің астында */ позициясы; * толығымен экранға */ жоғарғы: 0 сол жақ: 0 дисплей: жоқ )

Css кодын сипаттап көрейік. Біз block.wrapper файлын бейімделгіш етіп орнаттық, ол экран өлшеміне байланысты өзгереді, бірақ 960px аспайды. Мен түйме кодын көрсетпеймін. Біз #modal_window терезесінің енін пайызбен белгілейміз, ені .wrapper еніне байланысты болады. Терезені ортасына қою үшін шетті 33% етіп орнатыңыз. Ол 50%-17% деп есептеледі, мұнда 17% терезе енінің жартысы. Терезені сипаттар дисплейімен жасырамыз: жоқ және мөлдірлік: 0. #window_close және #myoverlay коды арқылы бәрі түсінікті деп ойлаймын. Енді jQuery кодын жазайық. Біз jqery қосылған деп есептейміз.

$(құжат).ready(функция() ( $("#gowindow").click(функция())(//түймешігін басыңыз $("#myoverlay").fadeIn(400, //қабат қабатын көрсету function() ( $("#modal_window") .css("дисплей", "блок") //терезені visible ету.animate((мөлдірлік: 1, жоғарғы: "50%"), 200); //ұлғайту мөлдірлік, терезе біркелкі жылжиды ) )); /* терезені алып тастаңыз */ $("#window_close, #myoverlay").click(функция())( //қабаттасу қабатын басыңыз немесе $ кесіңіз. ("#modal_window") .animate((мөлдірлік : 0, жоғарғы: "45%"), 200, //мөлдірлік қосулы, терезенің жоғарылау функциясы())( $(this).css("display", "none" //терезені көрінбейтін етіп жасау $("# myoverlay").fadeOut(/қабатты жою ));

Менің ойымша, Js коды түсіндіруді қажет етпейді, өйткені мен оны жақсы түсіндірдім. Менің ойым осы, сондықтан қорытындыласақ. Біз қарапайым jQuery жауап беретін модальды терезе жасадық

3. Сілтемеден шақырылатын jQuery модальды терезесінің мысалы (демодан)

Мүмкін, сіз Интернетте қалқымалы модальды терезені бірнеше рет көргенсіз - тіркеуді растау, ескерту, анықтамалық ақпарат, файлды жүктеу және т.б. Бұл оқулықта мен ең қарапайым модальді терезелерді жасаудың бірнеше мысалдарын ұсынамын.

Қарапайым қалқымалы модальді терезені жасау Бірден пайда болатын қарапайым модальды терезенің кодын қарастырайық.
jQuery коды

$(құжат).дайын(функция()
{
alert («Қалқымалы терезедегі мәтін»);
});

Кодты беттің негізгі бөлігіндегі кез келген жерге қойыңыз. Бет жүктелгеннен кейін бірден ешқандай пәрменсіз келесідей терезені көресіз:

Бірақ келесі код бүкіл бет браузерге жүктелгеннен кейін орындалады. Біздің мысалда, бетті суреттермен жүктегеннен кейін қарапайым қалқымалы терезе пайда болады:

$(терезе).load(функция()
{
alert("Бет жүктеу аяқталды!)");
});

CSS арқылы сілтемеден jQuery модальды терезесін шақыру Келесі қадам сілтеме басылған кезде модальды терезені жасау болып табылады. Фон баяу қараңғыланады.

Мұндай терезелерде логин мен тіркеу формаларының орналасқанын жиі көруге болады. Іске кірісейік

Алдымен html бөлігін жазайық. Бұл кодты құжаттың негізгі бөлігіне орналастырамыз.

Модальды терезені шақыру

Терезенің модальды мәтіні
Жабу
Модальды терезедегі мәтін.

CSS коды. Жеке CSS файлында немесе бас.

дене (
font-family:verdana;
шрифт өлшемі: 15px;
}
.link (түс:#fff; мәтінді безендіру: жоқ)
.link: меңзерді апару (түс:#fff; мәтінді безендіру: астын сызу)
#маска (
позиция: абсолютті;
сол жақ: 0;
жоғарғы: 0;
z-индекс: 9000;
фон түсі:#000;
көрсету:жоқ;
}
#boxes.window (
позиция: абсолютті;
сол жақ: 0;
жоғарғы: 0px;
-жоғарғы: 40px;
ені: 440px;
биіктігі: 200px;
көрсету:жоқ;
z-индекс:9999;
толтыру: 20px;
толып кету: жасырын;
}
#қораптар #диалог (
ені: 375px;
биіктігі: 203px;
толтыру: 10px;
фон түсі:#ffffff;
}
.жоғарғы(
позиция: абсолютті;
сол жақ: 0;
жоғарғы: 0;
ені: 370px;
биіктігі: 30px;
фон: #0085cc;
толтыру: 8px 20px 6px 10px;
}
.жабу(
қалқымалы: оңға;
}
.мазмұн(
толтыру үсті: 35px;
}

JQuery кодында біз модальды терезе мен масканың орналасуына, біздің жағдайда фонның біртіндеп қараңғылануына назар аударамыз.

Назар аударыңыз! Құжаттың басына кітапхананы қосуды ұмытпаңыз!

Кітапхананы Google веб-сайтынан қосу. Ал, jQuery кодының өзі.

jQuery коды

$(құжат).дайын(функция()(
$("a").басыңыз(функция(e))
e.preventDefault();
var id = $(бұл).attr("href");
var maskHeight = $(құжат).height();
var maskWidth = $(терезе).ені();
$("#mask").css(("ені":маскВидт,"биіктік":maskHeight));
$("#маска").fadeIn(1000);
$("#маска").fadeTo("баяу",0,8);
var winH = $(терезе).height();
var winW = $(терезе).ені();
$(id).css("жоғарғы", winH/2-$(id).height()/2);
$(id).css("сол жақ", winW/2-$(id).width()/2);
$(id).fadeIn(2000);
});
$(".window .close").басыңыз(функция (e))
e.preventDefault();
$("#mask, .window").hide();
});
$("#маска").басыңыз(функция () ()
$(this).hide();
$(".терезе"). hide();
});
});