Bu yerni bosing!

Yangilangan: 27.10.2017


Dastlab ushbu mavzuga qiziquvchilar modal oynalarning turli xil versiyalarda ishlashiga misolni ko'rib chiqishi va manbalarini yuklab olishi mumkin:
Siz ushbu darsni harakatga ko'rsatma sifatida qabul qilmasligingiz kerak, chunki ushbu bosqichda faqat zamonaviy brauzerlarda ishonchli qo'llab-quvvatlashga erishish mumkin edi ( IE 9+, Firefox, Safari, Opera, Chrome). IE brauzerining qadimgi versiyalari hali ham foydalanuvchilar orasida juda mashhurligini ko'rib, ushbu maqolani CSS3 imkoniyatlarini namoyish etishning o'ziga xos tajribasi sifatida ko'rib chiqishni tavsiya etaman.
OK, endi to'g'ridan-to'g'ri HTML kodining joylashishiga va CSS3 yordamida modal oynamizning uslubiga o'tamiz)))
Qadam 1. HTML
Birinchidan, ba'zi bir asosiy HTML belgilarini yarataylik. Ko'rib turganingizdek, modallar va tugmachalarni (havolalarni) faollashtirish uchun HTML-formatlashni ko'rib chiqsak, asosiy qurilish juda oddiy. Har bir modal oyna standart konteynerdan boshqa narsa emas
, ichida ma'lum bir tarkib va \u200b\u200b"Yopish" tugmachasi bilan, faqat CSS yordamida yaratilgan.

< a href= "#win1" class = "button button-green" > 1-oynani oching < a href= "#win2" class = "button button-red" > 2-oynani oching < a href= "#win3" class = "button button-blue" > 3-oynadagi video < a href= "#win4" class = "button button-orange" > 4-oynadagi fotosurat < a href= "#win5" >< img title= "" src= "img/realism_lrg.jpg" width= "150" height= "150" alt= "" /> < a href= "#x" class = "overlay" id= "win1" > < div class = "popup" > < a class = "close" title= "Yoping" href= "#close" > < a href= "#x" class = "overlay" id= "win2" > < div class = "popup" > Bu erda siz har qanday tarkibni, rasmlar yoki videolar bilan matnni joylashtirishingiz mumkin!< a class = "close" title= "Yoping" href= "#close" > < a href= "#x" class = "overlay" id= "win3" > < div class = "popup" > < h2> Sarlavha Bu erda siz o'zingizning videongizni yoki boshqa biron bir manbadan, YouTube, Vimeo va boshqalardan (iframe, embed) joylashtirdingiz ...< a class = "close" title= "Yoping" href= "page.html" onclick= "return false" > < a href= "#x" class = "overlay" id= "win4" > < div class = "popup" > < img class = "is-image" src= "your-picture.jpg" alt \u003d "" /\u003e< a class = "close" title= "Yoping" href= "#close" > < a href= "#x" class = "overlay" id= "win5" > < div class = "popup" > < img class = "is-image" src= "your-picture.jpg" alt \u003d "" /\u003e< a class = "close" title= "Yoping" href= "#close" >

Oynani ochish 1 Oynani ochish 2 Oynadagi video 3-oynada Surat 4-oynada 
Bu erda siz har qanday tarkibni, rasmlar yoki videolar bilan matnni joylashtirishingiz mumkin!
Sarlavha
Bu erda siz o'zingizning videongizni yoki boshqa biron bir manbadan, YouTube, Vimeo va boshqalardan qo'shasiz (iframe, embed) ...


Yuqoridagi kod misolida, aniqlik uchun men modal oynalar idishlariga qisqacha tushuntirishlar yozdim. Taqqoslash bo'yicha siz qolasiz div konteyner pop-up oyna, istalgan uchinchi tomon manbalaridan, YouTube, Vimeo va boshqalardan oddiy matn, rasm yoki video bo'lsin, xohlagan tarkibingizni joylashtiring. Modal oynalarning chaqiruviga havolalar matnli bo'lishi mumkin yoki ularni misoldagi kabi formatlash mumkin.