Modal forma
html xabari, input maydoni va OK/CANCEL tugmalari bilan formani ko’rsatuvchi showPrompt(html, callback) funksiyasini yarating.
- Foydalanuvchi matn maydoniga biror narsa yozishi va Enter yoki OK tugmasini bosishi kerak, keyin kiritilgan qiymat bilan
callback(value)chaqiriladi. - Aks holda, agar foydalanuvchi Esc yoki CANCEL tugmasini bossa,
callback(null)chaqiriladi.
Ikkala holatda ham bu kirish jarayonini tugatadi va formani olib tashlaydi.
Talablar:
- Forma oynaning markazida bo’lishi kerak.
- Forma modal bo’lishi kerak. Boshqacha qilib aytganda, foydalanuvchi uni yopmaguncha sahifaning qolgan qismi bilan hech qanday o’zaro ta’sir mumkin emas.
- Forma ko’rsatilganda, fokus foydalanuvchi uchun
<input>ichida bo’lishi kerak. - Tab/Shift+Tab tugmalari forma maydonlari orasida fokusni siljitishi kerak, uni boshqa sahifa elementlariga chiqishiga ruxsat bermang.
Foydalanish misoli:
showPrompt("Biror narsa kiriting<br>...aqlli :)", function(value) {
alert(value);
});Iframe dagi demo:
P.S. Manba hujjatda sobit pozitsiyaga ega forma uchun HTML/CSS mavjud, lekin uni modal qilish sizga bog’liq.
Modal oyna butun oynani qoplaydigan yarim shaffof <div id="cover-div"> yordamida amalga oshirilishi mumkin, masalan:
#cover-div {
position: fixed;
top: 0;
left: 0;
z-index: 9000;
width: 100%;
height: 100%;
background-color: gray;
opacity: 0.3;
}<div> hamma narsani qamrab olganligi sababli, uning ostidagi sahifani emas, balki barcha kliklarni oladi.
Shuningdek, biz body.style.overflowY='hidden' o’rnatish orqali sahifani aylantirishni oldini olishimiz mumkin.
Shakl <div> ichida emas, balki uning yonida bo’lishi kerak, chunki biz unda opacity bo’lishini istamaymiz.