Bu yerni bosing!

Modali oyna havola bosilganda paydo bo'ladigan va ba'zi ma'lumotlarni ta'minlaydigan konteyner. O'ylaymanki, ko'pchilik allaqachon tanish, ammo agar yo'q bo'lsa, demo versiyasini tomosha qilib, nima ekanligini tushunib oling. Endi ularning soni juda ko'p va ularning har biri o'ziga xos tarzda ishlaydi. Masalan, sizdan biron bir harakatni amalga oshirishingizni so'raydigan to'liq standartlar mavjud, ushbu misolda tasdiqlash. Yoki, masalan, saytga birinchi marta tashrif buyurganingizning yana bir varianti, bu ijtimoiy tarmoqlardagi guruhlarga turli xil obunalar uchun tegishli bo'ladi. u yerda modali oynalar toza joyda CSS, yaxshi, men bu ulushni olmoqchiman JavaScript, chunki u yanada qiziqarli bo'lib chiqadi va barcha brauzerlarda yomon ishlamaydi.
BIRINChI QADAM.JavaScript-kod.
Modali oynani ishga tushirish uchun qiymatni funktsiyaga o'tkazishingiz kerak window.onload... Unda biz ikkita identifikator elementini o'tkazamiz " a"va" b".
// elementlarni id "a" va "b" window.onload \u003d function () (a \u003d document.getElementById ("a"); b \u003d document.getElementById ("b");)
Keyin biz funktsiyani yozamiz " shouA"bu modalni ko'rsatadi va elementlarga o'tadi" a"va" b"uslublar, ya'ni havola bosilmasa, oynaning shaffofligi, kengligi va bloklanishini o'rnatamiz" ochiq".
// "showA" funktsiyasi oynasining showA () funktsiyasini ko'rsatish (// shaffoflikni o'rnating va // element "b" ning ko'rinishini bloklang b.style.filter \u003d "alfa (opacity \u003d 80)"; b.style.opacity \u003d 0.8; b .style.display \u003d "block"; // blokirovka va yuqori to'ldirishni "a" elementining 200px // ga o'rnating a.style.display \u003d "block"; a.style.top \u003d "200px";)
Modali oynani ochgandan so'ng, biz uni qandaydir tarzda yopishimiz yoki yashirishimiz kerak, buning uchun biz funktsiyani yozamiz " yashirish"bu modalni yashiradi va elementlarga uslublar qo'shadi" a"va" b".
// hideA () funktsiyalari uchun "a" va "b" elementlari uchun // oynasini yashiradigan "hideA" funktsiyasini chaqiring (b.style.display \u003d "none"; a.style.display \u003d "none";)
To'liq kod.