Dialog oynasi qisqa xabar yoki ma'lumotni namoyish qilishning ajoyib usuli. Hozirgi kunda moddal oynasi veb-dizaynning juda mashhur elementidir. Agar siz sahifaga maxsus tarkib qo'shsangiz, uni modal oynasiga kiritish yaxshiroqdir:
JavaScript-dan foydalanishdan oldin, qaysi bu lahzada Eng maqbul amaliyot hisoblanmaydi. Ammo HTML5 va CSS3 sizga hech qanday muammosiz modal derazalar yaratishga imkon beradi. Ushbu qo'llanmada biz CSS3 o'tishi, shaffoflik, ko'rsatgich-hodisa va fon rangidan foydalanamiz.
Ushbu modal oyna toza CSS-da yaratilgan. Bu moslashadi va odatda smartfonlar va planshetlarda ishlashi kerak. Shuningdek, yuqori aniqlikdagi katta ekranlarda.
CSS modal oynasini yaratish
Birinchidan, biz oddiy HTML kodini yaratishimiz kerak:
Ochiq modal!
Bizda model derazani va modal-bitta hashtagni ochishni taklif etadigan oddiy havolani mavjud. Biz bu erda barcha uslublarni sinflar yordamida belgilaymiz, shuning uchun identifikator modal maydonni yaratish uchun kanca sifatida ishlatiladi.
Shuni yodda tutingki, biz faqatgina "Soxta" soxta "Soxta selektor" emas, balki faqat CSS-dan foydalanamiz. : Nishondan oldin.”.
Keyingi siz modal oynaning barcha tarkibini saqlashingiz kerak. Div ichida biz giperhavolamiz. U biz bilan birga bo'lgan idishni yopadi cSS-dan foydalanish. . Keyin siz sarlavhani quyidagi matnli matnli matnlar bilan joylashtirishingiz mumkin. Hozir html belgisi endi shunday ko'rinadi:
Bu erda bitta modal misol! : D.
Biz uslublarni so'raymiz
Endi bizda divga o'ralgan giperhavk bor. Siz uni yanada amaliy qilish uchun konteyner uchun uslublarni tayinlashga kirishishingiz mumkin. Avval CSS-da modal oynada modal sinf yarating. U uchun biz soxta elementdan foydalanamiz: Oldin:
Modol: Oldin; Non; Fon: RGBA (0, 0, 0, 0,6); 0; pastty: 0; Z-indeksi: 10; Z-indeksi: 4.modl: nishon : Oldin (displey: blok;)
biz modol oynasini yaratingBuning uchun belgilangan holatni belgilash orqali. Foydalanuvchi sahifani aylantirganda u pasayadi.
Bundan tashqari, biz katta, o'ng, pastki va chap va chap va chap va chap va chap va chap chegirmalarni butun ekranni qamrab olgan. Endi siz orqa fonni, freym, radiusni, shuningdek sobit holatini o'rnatishingiz kerak. Bizning CSS kodi quyidagicha ko'rinadi:
Modal-dialog (#Fefefe; chegara: # 333 qattiq 1px; chegara: 50%; -100%; z-indeksi: 11; 11; kengligi: 360px; -webkit-o'zgartirilishi: translate (0, -500%); Tirik (0, -500%); translate (0, -500%); --webkit-o'tish: -webkit -Trancrancsforce 0.3s qulaylik; -mo-o'tish: -Moz-Transcience; -O -O-TRANSIYA;
Modol: Maqsad .Modal-aylanma: tarjima (0, 0); Tirik (0, 0); Tirik (0, 0); TARTIBI (0, 0);
Modal oynaning chiroyli ko'rinishi uchun siz foydalanishingiz kerak bo'lgan yana bir nechta uslublar:
tana (rang: # 333; shrift-yuzi: "Helvetka", Arige: Maydon: ikkala; ikkala; marja-yuqori: 40px; Past: 40px; chegara: 0; chegara-yuqori: 40px; uchun: 20px; 20px;) .Modal-tanasi (pladding: 20px ) .Modda sarlavha, .moding: 10px 20px;) .Modal-sarlavhasi (#ee) H2 (shrift-o'lchamlari: 20px;) .Modal-ipx ( Chegara tepasi: #ee Qattiq 1px; Matnni tekislang: O'ng;)
Endi, HTML modal oynasi uslublarini so'rasak va uni funktsional qilib qo'yganimizda, quyidagi o'ng tomonda tugmachani yaratishga qoldirdik. CSS kodi:
Btn (fon malum: # 428bca; chegarasi: # 357BD Qattiq 1px; Rang: 8px 15px; matnni bezatish: matnli; matn Adolation: markaz; min-kenglik: 60px; pozitsiya: rangi: 40em; 357ebd; # 357ebd; # 357ebd;) .BTN.btn-katta (shrift- Hajmi: 18px; 15px 20px; min-kengligi: 100px; Matn-ni aniqlash (#Aaaa; Fond; Fond; To'g'ri: 0; ) .Btn-yaqin: Hover (rang: # 919191;) / * tugmachasini bosing * / # # sekrutini o'chirish uchun qo'shish
Yaratilgan modal oynaning afzalliklari nimada?
Bizning model oynamizning asosiy afzalligi shundaki, u faqat HTML5 va CSS3 yordamida yaratilgan. Nima uchun bu juda muhim? Modal oyna JavaScript - Bu hatto yangi kelgan narsa yaratishi mumkin. Internetda yuklab olinadigan juda ko'p tayyor echimlar mavjud. Xo'sh, nega biz uni faqat HTML5 va CSS3 JavaScriptisiz qilishni xohlaymiz?
Masalan,, masalan, JavaScript-ni qo'llab-quvvatlashsiz foydalanuvchilar modal oynasidan foydalanishlari mumkin. Statistika ma'lumotlariga ko'ra, dunyo bo'ylab foydalanuvchilarning 2% dan ortig'i JavaScript-dan foydalanmaydi.
Biz animatsiya yaratish uchun CSS kodining bir nechta qatorlaridan foydalanamiz. Agar siz biron bir murojaat qilsangiz JavaScript kutubxonasi Animatsiyalar, keyin siz qanchalik kam kod ishlatganimizdan hayron bo'lasiz. Bu boshqa afzallikni beradi - tozalangan kod.
Biz barcha animatsiyani o'z ichiga olgan DISni amalga oshirdik va u bir nechta kodlardan iborat. Kodni tozalash vositasini nima qiladi va bu yechim, kodni o'zgartirish haqida xatni o'zgartirishdan qo'rqmasdan o'z xohishiga ko'ra o'z xohishiga ko'ra o'z xohishiga ko'ra o'z xohishiga ko'ra o'zgartirishingizga imkon beradi.
Va nihoyat, HTML5 va CSS3 kelajak uchun. Hammamiz o'z loyihalarida ularni ishlatishga harakat qilamiz. Ularga rahmat, siz toza kodni olasiz, siz JavaScript kutubxonalari haqida tashvishlanishingiz shart emas. HTML5 va CSS3 uzoq vaqt davomida biz bilan, shuning uchun ularni ishlatmaslik uchun hech qanday sabab yo'q.
Xulosa
Endi siz kirish yoki ro'yxatga olish shakli, HTML5 va CSS3-dan foydalanib, reklama bloklari yoki boshqa ko'plab narsalar uchun ishlatiladigan oddiy modal oynasini yaratishingiz mumkin. Bundan tashqari, siz nega JavaScript o'rniga HTML5 va CSS3-dan foydalanishingiz kerakligini bilib oldingiz va saytlar qanday saytlar modal derazalardan foydalanishlarini ko'rgan.
Maqolani tarjimasi " JavaScriptsiz CSS-modal oynasini qanday qilish kerak"Do'stona jamoa jamoasi tomonidan tayyorlangan.
Modal derazalar - veb-ustaning "Arsenal" da tez-tez ishlatiladigan vositadir. Bu ko'plab vazifalarni hal qilish uchun juda mos keladi, masalan ro'yxatga olish shakllari, reklama bloklari, xabarlar va boshqalar.
Ammo muhim joyga qaramay axborotni qo'llab-quvvatlash Loyiha, modal derazalar odatda funktsiyalarni kengaytirish yoki orqaga muvofiqlikni kengaytirishda muammolarni keltirib chiqarishi mumkin bo'lgan JavaScript-da amalga oshiriladi.
HTML5 va CSS3 sizga g'ayrioddiy osonlik bilan modal derazalar yaratishga imkon beradi.
HTML belgisi
Modol oynani yaratish yo'lidagi birinchi qadam oddiy va samarali baholash:
Ochiq model oynasi
Div element ichida
moddal oynaning tarkibi joylashtirilgan. Derazani yopish uchun siz havolani tashkil qilishingiz kerak. Masalan, oddiy sarlavha va bir nechta xatboshilarni joylashtiring. Bizning misolingiz uchun to'liq belgi quyidagicha ko'rinadi:
Ochiq model oynasi
X.
Moddal oynalar
CSS3 yordamida yaratilishi mumkin bo'lgan oddiy modal oynaning misoli.
U xabarlar chiqishidan kelib chiqadigan va ro'yxatdan o'tish shaklini tugatish uchun keng doirada ishlatilishi mumkin.
Tikuv
Sinf yarating modaldialiq. Va shakllana boshlang tashqi ko'rinish:
Modaldialiq (lavozimi: shrift-oila: arifa, helvetka, Sans-Serif; 0; orqa: RGBA (0,0,0,0,8); z -index: 99999; shaffofligi; eng qulay: eng qulay: shaffofligi: eng qulay: shaffofligi; Displity; Displeys: Ko'rsatkichlar; Ko'rsatkichlar;
Bizning oynamiz belgilangan holatga ega, ya'ni sahifani qachon aylantirsangiz, pastga tushadi ochiq oyna. Shuningdek, bizning qora fonimiz butun ekranda kengaytiriladi.
Orqa fonda kichik shaffoflik bo'ladi, shuningdek, mulk yordamida boshqa barcha elementlarning tepasida joylashgan bo'ladi. z-indeksi..
Oxir-oqibat, biz o'tishlarni model derazamizni chiqarish va uni faol bo'lmagan holatda yashiramiz.
Ehtimol, siz mulkni bilmaysiz ko'rsatkichlar.Ammo bu sichqonchaning tugmachasini bosish uchun narsalar qanday javob berishini nazorat qilishga imkon beradi. Biz uning qiymatini sinf uchun belgilaymiz modaldialiq., chunki psevdo sinf faol bo'lsa, havola sichqonchaning tugmachasini bosish uchun javob bermasligi kerak ": Maqsad".
Endi soxta sinf qo'shing : nishon. Va modal deraza uchun uslublar.
ModaldialOg: Maqsad (displey: shlap'lonlari; ko'rsatgichlar: Autocth) .Menadialog\u003e Fayl: 5px 20px 13px 13px; 10px; fon: FFF; fon masti: -Moz-chiziqli-gradyan (#Febkent-chiziqli-gradyan); fon asoslari: -O-chiziqli-gradyan (#fff, № 999); )
Psedo sinfi maqsad. Elementning chiqish rejimini o'zgartiradi, shuning uchun siz havolani bosganingizda model oynamiz ko'rsatiladi. Shuningdek, biz mulkning qiymatini o'zgartiramiz. Ko'rsatkichlar..
Biz sahifadagi modal oynaning kengligini va pozitsiyaning kengligini aniqlaymiz. Biz shuningdek, orqa va yumaloq burchaklar uchun gradientni aniqlaymiz.
Derazani yop
Endi siz oynani yopadigan funktsiyani amalga oshirishingiz kerak. Biz tugmachaning ko'rinishini shakllantiramiz:
Matn-balandlik: Mut -12px; Matn-bezi-ni tanlang: Matnni bezatish: SMS-bezak: Shrift; Shrift; shrift; Vazn: qalin; -webkit-chegara-radiusi: 12px; -Moz-chegara-radiusi: 12px;-boks 3px # 000; --webkit-baks-soya: 1px 1px 3px # 000; quti-soya: 1px 1px 3px # 000;).).
Bizning tugmachamiz uchun biz matnni va mavqeini o'rnatdik. Keyin biz tugmachani joylashtiramiz, biz uni ramkaning marshrutlash xususiyatlaridan foydalanib, engil soyani hosil qilamiz. Sichqoncha kursorini yashirganingizda, biz rang fonini o'zgartiramiz.
Ushbu darsda biz HTML5 va CSS3-dan foydalanib, modal oynani yaratishni o'rganamiz. Darsda biz JS-dan foydalanmaymiz, faqat CSS3. Modal derazalar shakl uchun ishlatilishi mumkin fikr-mulohazaFoto va video uchun va uni ishlatish uchun juda ko'p variantlar mavjud.
Biz o'z modeliy derazamizni qila boshlaymiz.
1-qadam. HTML belgisi
Avvalo, HTML belgisini qilishimiz kerak, i.e. Qaysi oyna ochishiga havola qiling va derazamizning ramkasini yarating. Buning uchun ushbu kodni yozing:
2-qadam. Tarkib modeli oynasi
Endi oynamiz tarkibini qo'shing. Biz sarlavha va kichik matnni yaratamiz va barchasini tegga qo'yamiz
va kodni kiritish
o'rniga nuqtalar. Siz hali ham derazamiz yopilib, uni berish uchun havolani qo'yishingiz kerak
sinf \u003d "Yopish". Sizning kodingiz shunday ko'rinishi kerak:
Redstar loyihasi
Redstar - Qadimgi allaqachon qiziqqan savollarga bag'ishlangan loyiha. Ushbu loyihada turli mavzularda bepul darslar va maqolalar mavjud. Mavzular juda xilma-xil bo'lib, oddiydan windows inmostucationlar Va saytlarning rivojlanishi bilan tugaydi.
QADAM 3. STYLES
Endi biz derazamiz uchun uslub yozishni boshlaymiz. Ushbu bosqichda biz ko'rinmas oynani qilamiz. Bu faqat havolani bosish orqali paydo bo'ladi. Buning uchun biz bizning sinfimiz uchun uslub yozamiz modaldialiq.:
Modaldialiq (lavozimi: shrift-oila: arifa, helvetka, Sans-Serif; 0; orqa: RGBA (0,0,0,0,8); z -index: 0; -webkit-O'tish: eng qulay: eng qulay: eng qulay: shaffofligi: ehtiyotkorlik 400 metrlik: Ko'rsatkichlar: ko'rsatgichlar;
I qadam. Funktsional va tomosha
Ushbu bosqichda biz oynamni allaqachon faoliyat ko'rsatmaymiz. Buning uchun bizning sinfimiz uchun yana bir nechta uslub qo'shing. modaldialiq.:
Modaldialiq: Belgilangan (shaffofligi: ko'rsatkichi: Autoct; Displd: Bosqich; 5px 20px 13px dan 13px 13px: 10px ; fon malum: #fff; fon malum: -Moz-chiziqli-gradyan); fon malumo (#fff, # in gradyan) (#FFF, # B8ECFB);)
Ushbu bosqichda siz allaqachon derazangizni ko'rishingiz mumkin, u allaqachon funktsiyalar mavjud. Ammo, tugma yaqin Bu juda chiroyli ko'rinmaydi.
Endi biz sinfimiz uchun uslublarni qo'shishimiz kerak yaqin.
5-qadam. Biz yaqin tugmachani tashkil qilamiz
Ushbu qadamda biz bizning oynamizni yopadigan tugmachasini yaxshilaymiz. Buning uchun biz bizning sinfimiz uchun uslub yozamiz yaqin:
Matn-balandlik: Mut -12px; Matn-bezi-ni tanlang: Matnni bezatish: SMS-bezak: Shrift; Shrift; shrift; Vazn: qalin; -webkit-chegara-radiusi: 12px; -Moz-chegara-radiusi: 12px;-boks 3px # 000; --webkit-baks-soya: 1px 1px 3px # 000; quti soya: 1px 1px 3px # 000;)).).
Xo'sh, endi bizning tugmachamizga o'xshaydi. Siz ham shunga o'xshash ko'rinishingiz kerak:
Ushbu dars tugadi. Diqqat uchun rahmat! Sizning qulayligingiz uchun men demo versiyasini qo'shdim va manba fayllari. Agar biror narsa aniq bo'lmasa, manba fayllarini yuklab oling.
Siz uchun dars sayt jamoasi tomonidan tayyorlanadi. Redstar.
Hammaga salom! Ushbu kichik sinfda biz toza CSS-da oddiy, ammo kuchli modal oynasini yaratamiz. Va shu bilan birga biz takrorlaymiz (va kimni ochib beraman) Flexbox kabi foydali narsa. Shu bilan birga, biz shunchaki cherkovni bosish orqali ochadigan va u ekranning markazida joylashgan model oynasini yaratamiz. Buni uzoq vaqt davomida faqat javascript yordamida amalga oshirish mumkin bo'lgan, ammo vaqt o'tgach, vaqt o'tgach, u so'zma-so'z 4 qator koddan foydalanish mumkin.
Ochiq model oynasi
Bularning barchasi ikkita qatlamdan iborat - birinchi qatlamdan iborat Modalwindovu., butun kosmikni modal oynasi atrofida qoraytiradi va ekranning o'rtasiga deraza tarkibini moslashtiradi. Ikkinchi qavat - sinf Modal_ kimd. - Moddal oynaning o'zi to'g'ridan-to'g'ri o'z ichiga oladi.
Endi ushbu izoh uchun CSS kodini yarating:
Modol (lavozimi: displey; displey; yuqori; pastki: 0; Z-indeksi: 0; Orqa fon: RGBA (0,0,0,0,0,0,7); ko'rsatkich -Vents: Yo'q .Modda: Belgilangan narsalar: Autoct; Z-indeksi: Auto; Auto; Auto; Mablagh; FFF;). Modalfull (Moddalfull (meli lavozimi: blok; z-indeks: 0; 100%; bo'yi: 100%;)
Keling, modal oynaning ishini ko'rib chiqaylik va bu qanday ishlashini tushunish.
Ko'rinib turibdiki, "Ochiq model oynani" bosganingizda, oyna derazaning derazasi va oq model oynasi aniq markazda ko'rinadi. Biz to'xtab, o'zingiz nazariyani bag'ishlaymiz.
Biz JavaScript-dan foydalanmaslikka rozi bo'lganligi sababli, elementlarni bosish uchun biz uni CSS-Psevdo-Sinflar va langar havolalari xash bilan osongina bajarishimiz mumkin (ushbu sahifadagi elementni ko'rsatish uchun) va id Havoladagi ko'rsatgichga teng bo'lishi kerak bo'lgan qiymat bilan. Bizning misolga qarang: xref. Havolalar I. id Moddal oynaning asosiy idishi bir xil qiymatga ega - Modalwindovu.. Bu juda muhim, chunki brauzer qaysi elementlar bir-biri bilan aloqada bo'lishini tushunishi kerak.
Bizning holatda, modal oynaning umumiy idishi yashirin va shunga ko'ra, modal oynaning barcha tarkibi yashirin hisoblanadi. Ammo havolani bosganingizda, element soxta sinfga ega bo'ladi : nishon. Va shunga ko'ra paydo bo'ladi. CSS kodi - mulkka qarang displey. O'zgaradi S. hech biri ustida egmoq. E'tibor bering, egiluvchan, chunki biz uning yordami bilan biz hal qilishimiz mumkin Modal_ kimd. Aniq markazlashtirilgan ekran. Biz uni darhol ro'yxatdan o'tkazgan boshqa barcha uslublar.
Aytgancha, agar siz uni qanday tekislagan bo'lsangiz, uni ekranning butun yuzasida yiqitgan bo'lsa, men aytdim - quyidagi 4 ta o'tiradi:
Yuqoridagi: 0; O'ngdan: 0; Pastki: 0; Chapdan: 0;
Biz buni o'ng tomonda, chapda, yuqori va pastki qismida nol pikselda bo'lishi kerakligini ta'kidladik. Buning o'rniga, siz, masalan, bunday tejashdan foydalanishingiz mumkin:
Kengligi: 100%; Balandlik: 100vh;
Bu erda biz kengligi 100% ekranni belgilaymiz, ammo balandligi o'rnatilishi yaxshiroq ko'rish balandligi - brauzer oynasining balandligi. Men versiyamda to'xtayman.
Yana bitta muhim nuance - Z-indeks mulkining qiymati Modal va Modal_ kimd.. Ular majburiy bo'lishi kerak va Modal_ kimd. Bu kamida bitta birlik ko'proq qiymatga ega bo'lishi kerak, aks holda modal oynaning tarkibi mavjud bo'lmaydi - havolalar va tugmalarni bosish mumkin emas. Va agar u erda aylantirish mazmuni bo'lsa, u ishlamaydi, chunki bitta element ikkinchisining ustiga tushadi.
Biz sizning durdonaingizni yaratishda davom etamiz. Siz bosganingizda, modal oynasi paydo bo'ladi, ammo biz uni shunchaki yopolmaymiz. Keling, uni yopish uchun tugmani qo'shamiz:
Oynaning ichidagi tarkib
Yaqin
Aslida u Esel : nishon. Bizning modeliy oynamiz uchun bu shunchaki boshlang'ich joyni - ko'zdan yashirish. Ammo bu ma'lumot bilan bir oz nozik narsa bor - bosilganda brauzer bunday elementni topishga harakat qiladi, ammo fiaskoga zarar etkazadi va sahifani boshiga aylantiradi. Ushbu xatti-harakatlar modal derazalar ishlab chiqarishga bunday yondashuvning mayda provazlaridan biridir, ammo bu unga engish mumkin.
Ushbu atribut uchun xref. Biz bilan o'zgaradigan havolalar «#»
ustida "#Modalwlincloz"va derazani ochgan havolani, atribut qo'shing id C xuddi shu ma'noda. Siz atributdan foydalanishingiz mumkin ism.lekin html5-da langarni aniqlash uchun yaxshiroq va atributni ko'rsatishi kerak id.
Ochiq model oynasi
Oynaning ichidagi tarkib
Yaqin
Endi brauzerni bosish tugmani bosing. Haqiqat uchun men ushbu langar ekranning yuqori chetida joylashganligini aytmoqchiman. Ammo agar ushbu tugmachani ochish tugmachasida bo'lsa, unda bu muammo tekislanadi. Va agar sarlavhaning o'rnatilgan pozitsiyasiga ega bo'lsa, u juda yaxshi bo'ladi - masalan, qayta qo'ng'iroqni yoki oldindan buyurtma berish / buyurtma berish / buyurtmani buyurtma qilish yaxshi bo'ladi, derazani yopishda yaxshi bo'ladi.
Bu erda nima qilishimiz mumkin:
Siz konteynerni yanada o'zgartirishingiz mumkin Modal_ kimd. - Bular hajmi cheklangan (balandligi va kengligini quritmasligi uchun). Va yana bir kichik nuance - men modal deraza bilan kodni tavsiya qilaman, har doim yoqilgan yorliq oldida o'tirish uchun
