Bu yerni bosing!

1. Javascriptsiz CSS3 bilan ishlaydigan modallar
Bloglarim o'quvchilari orasida modali oynalarni yaratishning eng mashhur usuli. Amalga oshirish juda oson. Qalqib chiquvchi bloklarning ko'rinishini shakllantirish va barcha funktsiyalar faqat CSS3-ga asoslangan, Javascript va qo'shimcha grafik elementlarsiz.
Modal oynalarni deyarli har qanday saytda ulash va namoyish qilish qobiliyati. HTML-kadrni kerakli joyga to'g'ri joylashtirish, kerakli tarkibni qo'shish, uslublarni ulash, hamma narsani faollashtiruvchi tugmachaga yoki saytning boshqa elementlariga (rasmlar, menyu elementlari, havolalar, matndagi bitta so'z va hk) bog'lash kifoya. ketishga tayyor.
2. CSS va yordamida modal oyna
O'zingizning saytingizda modal modal oynalarni har qanday ma'lumot bilan namoyish qilishni tez va osonlikcha amalga oshirishingiz mumkin bo'lgan juda sodda, engil jQuery plagini, oddiy matn, rasmlar, turli shakllar yoki ko'milgan video.
Tashqi ko'rinish CSS yordamida hosil bo'ladi, deraza kattaligi to'g'ridan-to'g'ri havolada, href \u003d "#? W \u003d 500" atributida o'rnatiladi, bu erda #? W \u003d 500 kerakli oyna kengligini bildiradi. Biroq, darsning tafsilotlarini o'rgangandan so'ng, hamma narsa juda aniq bo'ladi. Ushbu echim saytga ulangan jQuery kutubxonasini talab qiladi.

3. Adaptiv modal qat'iy markazlashgan
Dastlab, dars elementlarning tarkibini mutlaq markazlashtirish haqida o'ylangan edi, lekin bu haqda juda ko'p narsa yozilgan edi, men mavzuni moslashuvchanlik bilan suyultirishga qaror qildim va bularning barchasini faqat CSS vositalaridan foydalangan holda modal oynada o'rnatishga qaror qildim. Bu nima bo'ldi, siz darsni o'rganish orqali bilib olishingiz mumkin.

4. HTML5, CSS3 va yashirin katakchalardagi modal oyna
Pop-up (modal) oynalarni amalga oshirish uchun juda yangi usul. Yashirin tasdiqlash katakchalarini ochiladigan axborot bloklarini yoki "" yaratish uchun tez-tez ishlatardim. Natijada, hamma narsa juda sodda bo'lib chiqdi, CSS3 va HTML5 sintaksis xususiyatlari yordamida siz modal oynalar ishini osongina tashkil qilishingiz mumkin. Men dizaynga juda ko'p quloq solmadim (bu erda emas), men boshlang'ich sifatida Bootstrap ma'lumot bloklarini oldim. Ushbu usul barcha zamonaviy brauzerlarda yaxshi ishlaydi, foydalanuvchilar IE-shki-ning moxli versiyalarida qolib ketishdi, afsuski, uchib ketishadi.