Bu o'chirish funktsiyasiga o'tadi yoki shunchaki ramkani yo'q qiladi, bu erda ham bu kichik elementda ranglar palitrasini o'zgartirishga ta'sir ko'rsatiladi. Endi veb -ustasi uni saytga qo'yishi va unga statistik yoki ma'lumot beruvchi kabi turli toifalarni ko'rsatadigan tavsif yoki operatorlarni joylashtirishi mumkin.
Ammo haqiqat shundaki, agar sizda manbaning qorong'i uslubi bo'lsa, unda siz uslubni tezda o'zgartirishingiz, aniqrog'i, uni asl dizaynga moslashtirishingiz mumkin. HTML -langari bo'lgan havola ostida tugma bosilganda ishga tushadigan modalda sof CSS -ni yaratishning standart usullaridan biri. Tugmaning o'zi ko'rinishga ko'proq mos keladi, bu erda uslublar bitta sinfni olib tashlasa va nom qoladi, uni navigatsiya yoki boshqaruv paneliga qo'yish mumkin, bu erda asosiy funksionallik yoki sayt navigatsiyasi joylashgan.
Bu hamma narsa yaxshi ishlashini tekshirganda:
O'rnatishni boshlash:
Tugma bilan oyna
ZorNet.Ru - webmaster portali ×
Sayt uchun mavzu bo'yicha kontent bo'ladi.
CSS
Butksaton-satokavat (
displey: ichki blok;
matnni bezatish: yo'q;
o'ng chegara: 7 piksel;
chegara radiusi: 5 piksel;
to'ldirish: 7 piksel 9 piksel;
fon: # 199a36;
rang: # fbf7f7! muhim;
}
Anelumen (
displey: egiluvchan;
pozitsiya: sobit;
chapda: 0;
yuqori: -100%;
kengligi: 100%;
balandligi: 100%;
moslashtirish elementlari: markaz;
justify-content: markaz;
shaffoflik: 0;
-webkit-o'tish: yuqori 0s .7s, shaffoflik .7s 0s;
o'tish: yuqori 0s .7s, shaffoflik .7s 0s;
}
Anelumen: maqsad (
yuqori: 0;
shaffoflik: 1;
-webkit-o'tish: yo'q;
o'tish: yo'q;
}
Anelumen shakli (
kengligi: 100%;
maksimal kengligi: 530 piksel;
lavozim: nisbiy;
to'ldirish: 1,8 sm;
shaffoflik: 0;
fon rangi: oq;
-webkit-o'tish: shaffoflik .7s;
o'tish: shaffoflik .7s;
}
Anelumen.lowingnuska shakli (
fon: # f9f5f5;
chegara radiusi: 7 piksel;
to'ldirish tepasi: 8 piksel;
chegara: 3 pikselli qattiq #aaabad;
}
Anelumen.lowingnuska rasm h2 (
margin-top: 0;
pastki qismi-3 piksel;
pastki chegara: 1 pikselli qattiq # dcd7d7;
}
Anelumen: maqsadli raqam (
shaffoflik: 1;
}
Anelumen.lowingnuska .compatibg-ukastywise (
matnni bezatish: yo'q;
pozitsiya: mutlaq;
o'ng: 8 piksel;
yuqori: 0 piksel;
shrift o'lchami: 41 piksel;
}
Anelumennedismiseg (
chapda: 0;
yuqori: 0;
kengligi: 100%;
balandligi: 100%;
pozitsiya: sobit;
fon rangi: rgba (10, 10, 10, 0,87);
tarkibi: "";
kursor: standart;
ko'rish: yashirin;
-webkit-o'tish: barchasi .7s;
o'tish: hammasi .7s;
}
Anelumen: maqsadli .nedismiseg (
ko'rinishi: ko'rinadigan;
}
Bundan tashqari, bilishingiz kerakki, CSS uslubi va soxta sinf-bu CSS-ning ko'plab qiziqarli potentsialli ilovalaridan to'liq foydalanilmaganlardan biri.
Bu sahifaning URL manzili uning elementi identifikatoriga mos kelganda yoki uni boshqacha qilib aytganda, foydalanuvchi sahifadagi ma'lum bir elementga o'tganda ishga tushadi.
Hammaga salom! Ushbu qisqa qo'llanmada biz sof CSS -da oddiy, ammo kuchli modal yaratamiz. Va shu bilan birga biz flexbox kabi foydali narsani takrorlaymiz (va kim uchun ochamiz). Bunday holda, biz shunchaki bosish bilan ochiladigan modal oynani emas, balki ekranning markazida aniq joylashtirilgan oynani yaratamiz. Bir vaqtlar buni faqat javascript yordamida amalga oshirish mumkin edi, lekin vaqt o'tib ketadi va endi buni 4 satr kod bilan qilish mumkin.
Modali oynani ochish
Deraza ichidagi tarkib
Bu modal oynaning hammasi xuddi ikki qatlamdan iborat - birinchi qavati, o'z sinfiga ega ModalWindow, modal atrofidagi hamma joyni qoraytiradi va oynaning mazmunini ekranning o'rtasiga tekislaydi. Ikkinchi qavat - sinf Modal_Body- to'g'ridan -to'g'ri modal oynaning mazmunini o'z ichiga oladi.
Keling, ushbu belgilash uchun CSS yarataylik:
Modal (pozitsiya: sobit; ko'rsatish: yo'q; yuqori: 0; o'ng: 0; pastda: 0; chapda: 0; z-indeks: 0; fon: rgba (0,0,0,0.7); ko'rsatgich hodisalari: yo'q ;) .Modal: maqsad (ko'rsatish: moslashuvchan; ko'rsatgich hodisalari: avtomatik;) .Modal_Body (pozitsiya: nisbiy; z-indeks: 2; ko'rsatish: blok; chegara: avtomatik; to'ldirish: 15 piksel; fon: #FFF;). ModalFull (pozitsiya: mutlaq; displey: blok; z-indeks: 0; kenglik: 100%; balandlik: 100%;)
Keling, modal oynaning ishini ko'rib chiqaylik va u qanday ishlashini aniqlaylik.
Ko'rib turganimizdek, "Modal oynani ochish" tugmachasini bosganingizda, butun oyna soyali bo'lib qoladi va aynan o'rtada oq modali oyna paydo bo'ladi. Keling, hozircha bu haqda to'xtalib, o'zimizni nazariyaga bag'ishlaymiz.
Biz JavaScript-ni ishlatmaslikka rozi bo'lganimizdan va uni elementlarga bosishlarni kuzatib borish uchun ishlata olmasligimizdan, biz buni CSS-ning psevdo-klassi va xashli ankraj havolasi yordamida osonlikcha bajarishimiz mumkin (berilgan sahifadagi elementga ishora qilish uchun) va id havola ko'rsatgichiga teng keladigan qiymat bilan. Bizning misolimizga qarang: href havolalar va id modal oynaning asosiy idishi bir xil ma'noga ega - ModalWindow... Bu juda muhim, chunki brauzer qaysi elementlar bir -biri bilan o'zaro aloqada bo'lishini tushunishi kerak.
Bizning holatda, modal oynaning umumiy konteyneri yashiringan va shunga mos ravishda modal oynaning butun tarkibi yashiringan. Lekin havolani bosganingizda, element soxta sinfga ega bo'ladi : maqsad va shunga mos ravishda paydo bo'ladi. CSS kodiga qarang - mulk ko'rsatish dan o'zgaradi hech kim yoqilgan egilmoq... E'tibor bering, bu moslashuvchan, chunki u bilan biz tekislashimiz mumkin Modal_Body aniq ekran markazida. Biz boshqa barcha uslublarni birdaniga tayinladik.
Aytgancha, agar siz ekranning butun yuzasi qanday tekislanganini tushunmasangiz, men sizga aytaman - hammasi quyidagi 4 qatorda:
Yuqori: 0; o'ngda: 0; pastki: 0; chapda: 0;
Biz bir vaqtning o'zida o'ng, chap, yuqori va pastdagi nol pikselda bo'lishi kerakligini ko'rsatdik. Buning o'rniga, masalan, quyidagi qurilishdan foydalanishingiz mumkin:
Kengligi: 100%; balandligi: 100 Vt;
Bu erda biz ekranning 100% ga teng kengligini belgilaymiz, lekin balandlikdan foydalanib sozlash yaxshidir ko'rish maydonining balandligi- brauzer oynasining balandligi. Men o'z versiyamga e'tibor qarataman.
Yana bitta muhim nuance Ning z-index xususiyatining qiymati Modali va Modal_Body... Ular majburiy bo'lishi kerak va Modal_Body u kamida bitta katta qiymatga ega bo'lishi kerak, aks holda modal oynaning mazmuni bo'lmaydi - havolalar va tugmachalarni bosish imkonsiz bo'ladi. Va agar aylantirishdan mamnun bo'lsangiz, bu ham ishlamaydi, chunki bitta element boshqasiga to'g'ri keladi.
Keling, o'z asarimizni yaratishda davom etamiz. Bosilganda modal oyna paydo bo'ladi, lekin biz uni yopolmaymiz. Uni yopish uchun tugma qo'shamiz:
Deraza ichidagi tarkib
YopishAslida, u bekor qilinadi : maqsad bizning modal oynamiz uchun va keyin faqat boshlang'ich pozitsiyasini oladi - u ko'zdan yashiriladi. Ammo bu havolada qandaydir noziklik bor - uni bosganingizda, brauzer bunday elementni topishga urinadi, lekin u muvaffaqiyatsiz bo'ladi va sahifani boshidanoq siljitadi. Bu xulq -atvor modallarni ishlab chiqarishga bo'lgan yondashuvning kichik kamchiliklaridan biridir, lekin uni hal qilish mumkin.
Buning uchun atribut href biz o'zgartiradigan havola orqali «#» yoqilgan "#ModalWindowClose" va oynani ochgan havola tugmasi uchun atributni qo'shing id bir xil qiymat bilan. Siz atributdan ham foydalanishingiz mumkin ism, lekin HTML5 -da langarni aniqlash yaxshiroq va siz atributni ko'rsatishingiz kerak id.
Modali oynani ochish
Deraza ichidagi tarkib
YopishEndi bosilganda brauzer tugmachaga qaytadi. Haqiqat uchun aytmoqchimanki, bu langar ekranning yuqori chetida joylashgan bo'ladi. Ammo, agar ochilish tugmasi yuqori yoki pastki qismda bo'lsa, bu muammo tekislanadi. Va agar sarlavha aniq pozitsiyaga ega bo'lsa, umuman yaxshi bo'ladi - masalan, qayta qo'ng'iroq qilish yoki oldindan buyurtma berish / maslahat berish uchun, deraza yopilganda yaxshi ishlaydi.
Mana biz olgan narsalarga misol:
Siz konteynerni biroz o'zgartirishingiz mumkin Modal_Body- bu o'lcham cheklovlari (balandligi va kengligi kengaymasligi uchun). Va yana bir kichik nuance - kodni, agar iloji bo'lsa, yopilish yorlig'idan oldin modali oyna bilan joylashtirishni tavsiya qilaman
