3. Havola orqali chaqiriladigan jQuery modal namunasi (Demo bilan)
Ehtimol, siz allaqachon Internetda qalqib chiquvchi modal oynani ko'rgansiz - ro'yxatdan o'tishni tasdiqlash, ogohlantirish, yordam ma'lumoti, faylni yuklab olish va boshqalar. Ushbu qo'llanmada men eng oddiy modal oynalarni yaratish bo'yicha ba'zi misollarni taklif qilaman.
Oddiy modal qalqib chiquvchi oyna yarating
Keling, darhol paydo bo'ladigan eng oddiy modal oynaning kodini ko'rib chiqaylikjQuery kodi
Kodni istalgan joyga joylashtiring tanasi sizning sahifangiz. Sahifani yuklaganingizdan so'ng darhol hech qanday buyruqlarsiz quyidagi oynani ko'rasiz:
Ammo quyidagi kod butun sahifani brauzerga yuklagandan so'ng bajariladi. Bizning misolimizda, sahifani rasmlar bilan yuklagandan so'ng, oddiy qalqib chiquvchi oyna ochiladi:
CSS bilan havoladan jQuery modalini chaqirish
Keyingi qadam yaratishdir modal oyna havolani bosganingizda. Fon asta-sekin qorayadi.
Kirish va ro'yxatdan o'tish shakllari bunday oynalarda joylashganligini tez-tez ko'rishingiz mumkin. Keling, biznesga kirishaylik
Boshlash uchun yozamiz html qismi. Ushbu kodni hujjatingizning asosiy qismiga joylashtiramiz.
Modal oynani chaqirish
CSS kodi. Yoki alohida CSS faylida yoki ichida
JQuery kodida biz modal va niqobning holatiga, bizning holatlarimizda fonning asta-sekin qorayishiga e'tibor qaratamiz.
Diqqat! Hujjat boshiga kutubxonani kiritishni unutmang!
Kutubxonani Google saytidan ulash. Xo'sh, jQuery kodining o'zi.
jQuery kodi
Hozirgi vaqtda turli saytlar uchun har xil shakl va o'lchamdagi qalqib chiquvchi modal oynalar - qalqib chiquvchi oynalar - ro'yxatdan o'tish, avtorizatsiya qilish, ma'lumot oynalari - odatiy holga aylangan.Masalan Shadowbox.
Bunday qalqib chiquvchi oynalarning ko'rinishi, hajmi va dizayni butunlay xilma-xildir - qoplama, soyalar, animatsiyalar bilan - siz hamma narsani sanab bo'lmaydi. Ularni birlashtiradigan yagona narsa, ehtimol, ular odatda sahifaning o'rtasida - gorizontal va vertikal ravishda ko'rsatiladi. Va bu markazlashtirish JS yordamida amalga oshiriladi. Men bu hisob-kitoblarning tafsilotlariga kirmayman, ularni faqat qisqacha tasvirlab beraman:
Qalqib chiquvchi HTML kodi odatda quyidagi tuzilishga ega:
Va css( Bu yerda va pastda, men ataylab faqat ba'zi brauzerlar va ularning versiyalari uchun zarur bo'lgan ba'zi xususiyatlarni yozishni qoldirib, faqat eng asosiylarini qoldiraman.):
Popup_overlay(
pozitsiyasi: sobit;
chap: 0
yuqori: 0;
fon: #000
shaffoflik: .5
filtr: alfa (shaffoflik = 50);
z indeksi: 999
}
.qalqimoq(
pozitsiyasi: mutlaq;
kengligi: 20%
z-indeks: 1000;
chegara : 1px qattiq #ccc ;
fon: #fff
}
JS brauzer va brauzer versiyasini aniqlaydi va shu asosda ish maydonining o'lchamlarini va qalqib chiquvchi oynaning o'lchamlarini (agar ular o'rnatilmagan bo'lsa) hisoblab chiqadi va keyin uning yuqori chap burchagi (css) holati bo'yicha oddiy hisoblar amalga oshiriladi. .popup uchun chap va tepadagi xususiyatlar). Ko'pgina plaginlar sahifa o'lchamini o'zgartirishga ham munosabat bildiradi, har safar hamma narsani qayta hisoblab chiqadi, shunda qalqib chiquvchi oyna aniq ish maydonining markazida joylashgan bo'ladi.
Men tabiatan perfektsionistman (ba'zida bu yomonligini bilaman) va ko'pincha kichik detallar bilan bezovtalanaman, bu tafsilotlarni yaxshilashga va maksimal darajada kengaytirishga harakat qilaman va men ishning ushbu lahzasiga bog'lanib qololmay qoldim. ushbu plaginlarning barchasidan. Qalqib chiquvchi oynani joylashtirish bo'yicha barcha ishlarni JS yelkasidan brauzerning o'ziga o'tkazish mumkin, ya'ni bu ishni CSS yordamida amalga oshirish mumkin degan fikr paydo bo'ldi.
Biz shunday qilamiz.
Quyida men asosiy brauzerlarning barcha asosiy versiyalarida ishlaydigan qalqib chiquvchi oynaga misol keltiraman. IE da to'g'ri ishlashi uchun<9 необходима некоторая экстра-разметка и хаки, потому детальное описание написания такого метода я опущу, а для интересующихся выложу полную версию.
Shunday qilib, bizda tugmachali sahifa bor, uni bosgandan so'ng, ba'zi ma'lumotlarga ega modal oyna paydo bo'lishi kerak va tarkibning qolgan qismi qoplama bilan qoplanishi kerak.
Birinchidan, HTML kodi. Uning tuzilishi yuqorida ko'rsatilgan koddan biroz farq qiladi, nima uchun - bu haqda keyinroq maqolada; element sinflari bir xil bo'lib qoladi:
<
div
class
="popup__overlay">
<
div
class
="popup">
Va ba'zi CSS:
Popup_overlay(
pozitsiyasi: sobit;
chap: 0
yuqori: 0;
kengligi: 100%
balandligi: 100%
z indeksi: 999
}
.qalqimoq(
}
belgilangan o'lchamlar
Eng oson variant. Hech qanday yangi narsani ixtiro qilish kerak emas.Qalqimoq (
chap: 50%
yuqori: 50%;
kengligi: 400px
balandligi: 200px;
chap chekka: -200px;
tepalik chegarasi: -100px
}
Yarim kenglik va balandlikdagi salbiy chekkalar odatiy va zerikarli, bunda hech qanday asl narsa yo'q, keling, davom etamiz.
Qalqib chiquvchi oyna o'lchamlari tarkibga bog'liq
Birinchisi - gorizontal tekislash - bu osonroq ko'rinadi. Agar qalqib chiquvchi oynaning kengligi aniq bo'lsa, unda quyidagilar kifoya qiladi:Qalqimoq (
chegara: avtomatik
}
Bu vertikal hizalanishga hech qanday ta'sir qilmaydi va aytmoqchi, agar siz uchun faqat gorizontal tekislash etarli bo'lsa, qalqib chiquvchi oynaning boshqa yuqori chegarasini ko'rsatib, u erda to'xtashingiz mumkin. Ammo bu biz uchun etarli emas! Davom etish.
Vertikal tekislash. Bu erda qiziqarli bo'ladi. Albatta, displeyli jadval yoki jadval emulyatsiyasi: jadval va displey: jadval-hujayrasi bunday vazifani hech qanday muammosiz hal qilgan bo'lardi, ammo bu ishni eski IEda qilish qimmatroq. Jadval ham yo'qoladi - aniq sabablarga ko'ra.
Shunday qilib, marja allaqachon yo'qolgan - biz o'lchamlarni bilmaymiz. Keling, shunga o'xshash effektlarga ega bo'lgan xususiyatlarni eslaylik. Ha, matnni tekislang. Lekin faqat inline elementlar uchun. OK. Ko'rinishidan, Xudoning o'zi displeydan foydalanishni buyurganga o'xshaydi: inline-block - inline elementlar uchun xususiyatlarni qo'llashingiz mumkin bo'lgan blok elementi. Ushbu xususiyatni qo'llab-quvvatlagan holda, barcha brauzerlarda hamma narsa bor, deyish mumkin, tartibda. Kod shunga o'xshash narsaga aylanadi:
Popup_overlay(
pozitsiyasi: sobit;
chap: 0
yuqori: 0;
kengligi: 100%
balandligi: 100%
z-indeks: 999;
matnni tekislash: markaz
}
.qalqimoq(
displey: inline-block;
vertikal tekislash: o'rta
}
Qolgan narsa vertikal tekislash - vertikal tekislash biz uchun yaxshi. Boshqa har qanday vaziyatda satr balandligidan foydalanish ham o'rinli bo'lardi, lekin bizda qat'iy sahifa balandligi (bu kontekstda satr balandligi) yo'qligi sababli, biz uni bu erda ishlata olmaymiz. Qutqarish uchun kelgan bir hiyla - noma'lum o'lchamdagi elementlarning vertikal hizalanishi. Men bu usulni Habré-da topganimni aniq eslayman, lekin, afsuski, bu mavzuga havola topa olmadim. Bu usul quyidagilardan iborat: nol kenglikdagi va 100% ota balandligidagi inline-blok elementi qo'shiladi, bu chiziq balandligini ota-ona balandligining 100% ga, ya'ni sahifaning ish maydonining balandligiga "kengaytiradi". . Keling, uni yanada oqlangan qilaylik - qo'shimcha belgilash o'rniga biz psevdoelementlardan foydalanamiz:
Popup_overlay :keyin (
displey: inline-block;
kengligi: 0
balandligi: 100%
vertikal tekislash: o'rta;
Tarkib: ""
}
Qoplamaning shaffof xiralashishini qo'shish qoladi - rgba buni hal qiladi. Hammasi! Endi qalqib chiquvchi oynaning holati faqat CSS darajasidagi brauzer vositalari tomonidan tartibga solinadi.
Ushbu darsda men tajribali maket dizaynerlari va CSS guruslariga sirni ochmayman, ammo bu maqola yangi boshlanuvchilar uchun foydali bo'ladi. bu yerda butun sayt ustida qalqib chiquvchi oynalar yaratishni o'rganishingiz mumkin.Ko'pincha bunday oynalar saytda muayyan harakatlar bajarilgandan so'ng paydo bo'ladi, masalan, foydalanuvchi "Qayta qo'ng'iroqqa buyurtma berish" havolasini bosadi va uning oldida buyurtma shakli paydo bo'ladi.
PopUp oynalarini ajax bilan birgalikda ishlatish juda qulay, ammo bu boshqa dars uchun mavzu.
PopUp qalqib chiquvchi oynalaridan foydalanadigan Internetda tobora ko'proq veb-resurslar paydo bo'la boshladi. Misol tariqasida taniqli ijtimoiy tarmoqlarni keltirish mumkin. Skrinshotlardagi barcha keraksiz ma'lumotlar olib tashlandi.
Bilan aloqada
Menimcha, savolni o'rganishni boshlash uchun etarli sabablar bor: saytingizda PopUp qalqib chiquvchi oynani qanday qilish kerak.
Muammo bayonoti (TOR)
Butun sayt bo'ylab ekran xiralashgan qalqib chiquvchi oyna yaratish kerak.Qaror
1-usul
html
css
*( font-family: Areal; ) .b-container( kengligi: 200px; balandlik: 150px; fon rangi: #ccc; chekka: 0px avtomatik; toʻldirish: 10px; shrift oʻlchami: 30px; rang: #fff; ) .b-popup(kenglik:100%; balandlik: 2000px; fon rangi: rgba(0,0,0,0.5); toʻldirish:yashirin; joylashuv:fikrlangan; tepa:0px; ) .b-popup .b-popup -kontent (chekka: 40px avtomatik 0px avtomatik; kenglik: 100px; balandlik: 40px; toʻldirish: 10px; fon rangi: #c5c5c5; chegara radiusi: 5px; quti soyasi: 0px 0px 10px #000; )Natija:
Ko'pincha foydalanish tavsiya etiladi:
Lavozim: mutlaq;
Ha, natija shunga o'xshash, ammo biz "so'nish" blokining balandligini o'rnatganimiz sababli, aylantirish panellari paydo bo'ladi. Shuning uchun bu usul mos emas.
2-usul
Bu usul 1-usuldan tubdan farq qilmaydi, lekin men uni qulayroq deb bilaman.html (o'zgarishsiz)
css
*( font-family: Areal; ) .b-container( kengligi: 200px; balandlik: 150px; fon rangi: #ccc; chekka: 0px avtomatik; toʻldirish: 10px; shrift oʻlchami: 30px; rang: #fff; ) .b-qalqib chiquvchi (kenglik:100%; min-balandlik:100%; fon-rang: rgba(0,0,0,0,5); to‘lib ketish:yashirin; joylashuv:fikrlangan; tepa:0px; ) .b-qalqib chiquvchi oyna . b-qalqib chiquvchi oyna mazmuni (chegara: 40px avtomatik 0px avtomatik; kenglik: 100px; balandlik: 40px; toʻldirish: 10px; fon rangi: #c5c5c5; chegara radiusi: 5px; quti soyasi: 0px 0px 10px #000; )Natija shunga o'xshash
Mulk tufayli: min-balandligi: 100%; bizning "so'nayotgan" blokimiz 100% kenglikka o'rnatiladi va minimal balandlik 100% ekranda.Ushbu usulning yagona kamchiligi shundaki, Internet Explorer bu xususiyatni faqat 8.0 versiyasidan boshlab qo'llab-quvvatlaydi.
JQuery-ga sehr qo'shish
Endi qalqib chiquvchi oynamizni yashirish/ko'rsatish uchun havolalarni qo'shamiz.Buning uchun jQuery kutubxonasi va kichik skriptni kiritishingiz kerak:
Bundan tashqari, HTML-ni yangilashingiz kerak:
Natija
PopUp endi sahifa yuklanganda yashiradi.Natijani shu yerda ko'rish mumkin.
Funktsiyalar bo'yicha oddiy modal oyna, u butunlay sof CSS-da yaratilgan, uni saytga qo'ng'iroq qilish uchun turli funktsiyalar ostida qo'yishingiz mumkin. Bu, ehtimol, o'rnatish qulayligi, balki o'rnatish nuqtai nazaridan, modal oynalar tanlovida men duch kelgan ko'p narsalardan biridir. Lekin asosiysi, uning funksionalligi, boshqalardan kam bo'lmaydi. Bundan tashqari, sukut bo'yicha u engil soya ostida amalga oshiriladi, bu erda tugma o'ng yuqori burchakda xoch shaklida o'rnatiladi.Bu o'chirish funktsiyasiga o'tadi yoki shunchaki ramkani yo'q qilish uchun, bu kichik elementda ham ranglar palitrasini o'zgartirish effekti mavjud. Endi veb-usta uni saytga qo'yishi va unga tavsif yoki operatorlarni joylashtirishi mumkin, ular statistika yoki informator kabi turli toifalarni ko'rsatishi mumkin.
Ammo haqiqat shundaki, agar sizda resursning qorong'u uslubi bo'lsa, unda uslubda siz gamma-ni tezda o'zgartirishingiz mumkin, aniqrog'i uni original dizaynga moslashtirasiz. Bu yerda HTML langari bilan havola ostidagi tugmani bosganingizda yonadigan modalga sof CSS-ni qo'yishning standart usullaridan biri. Tugmaning o'zi ko'rinish uchun ko'proq ishlaydi, bu erda uslublarda bitta sinf o'chiriladi va nom qoladi, uni ham navigatsiyaga, ham asosiy funksionallik yoki sayt navigatsiyasi joylashgan boshqaruv paneliga qo'yish mumkin.
Bu hamma narsa yaxshi ishlayotganligini tekshirganda:
O'rnatishni boshlaylik:
Tugmali oyna
ZorNet.Ru - webmaster portali×
Bu sayt uchun kontent joylashadi.
css
Butksaton-satokavat (
displey: inline-block
matn-bezak: yo'q;
chekka o'ng: 7px;
chegara radiusi: 5px
to'ldirish: 7px 9px;
fon: #199a36;
rang: #fbf7f7 !muhim;
}
Anelumen (
displey: flex;
pozitsiyasi: qattiq;
chap: 0;
yuqori: -100%;
kengligi: 100%
balandligi: 100%;
align-elementlar: markaz;
asoslash-tarkib: 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 kenglik: 530px
pozitsiya: nisbiy;
to'ldirish: 1,8em
shaffoflik: 0
fon rangi: oq
-webkit-o'tish: shaffoflik .7s;
o'tish: shaffoflik .7s;
}
Anelumen.lowingnuska shakli (
fon: #f9f5f5;
chegara radiusi: 7px
to'ldirish ustki qismi: 8px;
chegara: 3px qattiq #aaabad;
}
Anelumen.lowingnuska raqam h2 (
yuqori chegara: 0;
to'ldirish-pastki: 3px
chegara-pastki: 1px qattiq #dcd7d7;
}
Anelumen: maqsadli raqam (
shaffoflik: 1
}
anelumen.lowingnuska .compatibg-ukastywise (
matn-bezak: yo'q;
pozitsiyasi: mutlaq;
o'ng: 8px;
yuqori: 0px;
shrift o'lchami: 41px;
}
Anelumen .nedismiseg (
chap: 0;
yuqori: 0;
kengligi: 100%
balandligi: 100%;
pozitsiyasi: qattiq;
fon rangi: rgba(10, 10, 10, 0,87);
tarkib: "";
kursor: standart;
ko'rinish: yashirin;
-webkit-o'tish: barcha .7s;
o'tish: barcha .7s;
}
Anelumen:target .nedismiseg (
ko'rinish: ko'rinadigan;
}
Shuni ham bilish kerakki, CSS uslubi va psevdo-klassi ko'plab qiziqarli potentsial ilovalarga ega CSS-ning to'liq foydalanilmagan xususiyatlaridan biridir.
U sahifaning URL manzili uning elementi identifikatoriga to‘g‘ri kelganda yoki boshqacha qilib aytganda, foydalanuvchi sahifadagi ma’lum bir elementga o‘tganda ishga tushadi.
Hammaga salom, men sizga modal oyna degan juda qulay narsa haqida gapirib beraman, modal oynani qanday yasashni aniqlaymiz? Ko'pchilik bu nima ekanligini tushunmaydi, men buni siz tushunadigan tilda tushuntirishga harakat qilaman, boshqacha aytganda, bu tugma yoki matnni bosganingizda qalqib chiquvchi oyna.
Bu oyna ichida har qanday ma'lumot (video, rasm, kod va hokazo) bo'lishi mumkin, men endi modal oynadan ko'proq foydalana boshladim, chunki ba'zi materiallar bor, deylik, sahifada ko'rsatilmaydi, lekin rasm bor edi deylik, ustiga bosganingizda ma'lumot yozilgan oyna ochiladi.
Men buni yaqinda bitta saytda qildim, asosiysiga rasmni, hatto rasmini ham emas, balki YouTube videosidan skrinshotni kiritdim va uni bosganingizda videoni ko'rsatadigan oyna ochiladi. Bunday oynaning misolini o'yin bilan mening sahifamda ko'rish mumkin, printsip bir xil, siz rasmni bosasiz, o'yin bilan oyna ochiladi. Men buni qildim, chunki o'yin kengaytmasi mening kontent ustunimdan kengroq, shuning uchun vaziyatdan chiqish yo'lini topdim.
CSS-dagi modal oynani ko'rib chiqing, boshimizni aldamaslik uchun biz uslublardan foydalanamiz, ya'ni u asosiy fayldagi uslublarni va bizning oynamizdagi kodni belgilaydi, biz hamma narsani batafsil ko'rib chiqamiz, nima va qanday.
CSS da modal oyna, modal oyna qanday yasaladi
Bizga kerak bo'lgan birinchi narsa - uslublar, to'liq kodni quyidagi uslublar bilan nusxalash va uni asosiy uslub faylingizga, ya'ni style.css-ga joylashtirish.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 | . Oyna (joylashuvi: sobit; shrift oilasi: Arial, Helvetica, sans-serif; tepa: 0; o‘ng: 0; pastki: 0; chap: 0; fon: rgba(0, 0, 0, 0,7) ; z-indeks : 99999 ; - webkit- o'tish: shaffoflik 400 ms qulaylik; - moz- o'tish: shaffoflik 400 ms qulaylik; o'tish: shaffoflik 400 ms osonlik; displey: yo'q; ko'rsatgich hodisalari: yo'q; ) . Oyna: maqsad (displey: blok; ko'rsatgich-hodisalar: avtomatik; ). Oyna > div (kengligi: 460px; joylashuvi: nisbiy; chekka: 10% avtomatik; toʻldirish: 30px 10px 10px; chegara radiusi: 10px; fon: #fff; quti soyasi: 0px 0px 20px 2px; ). yopish (fon: #cc3300; rang: #FFFFFF; chiziq balandligi: 25px; joylashuv: mutlaq; o'ng: - 12px; matnni tekislash: markazga; tepa: - 10px; kenglik: 24px; matnni bezash: yo'q; shrift- vazn: qalin; - webkit- chegara - radius: 12px; - moz- chegara - radius: 12px; chegara - radius: 12px; - moz- quti-soya: 1px 1px 3px #000; - webkit- quti-soya: 1px 1px 3px #000; quti soyasi: 1px 1px 3px #000; ). yopish: kursorni ko'tarish (fon: #990000; ) |
Oyna (joylashuvi: qattiq; shrift oilasi: Arial, Helvetica, sans-serif; tepa: 0; o‘ng: 0; pastki: 0; chap: 0; fon: rgba(0,0,0,0,7); z-indeks : 99999; -webkit-o'tish: shaffoflik 400 ms qulaylik; -moz-o'tish: shaffoflik 400 ms qulaylik; o'tish: shaffoflik 400 ms qulaylik; displey: yo'q; ko'rsatgich-hodisalar: yo'q; ) .Oyna: maqsad ( displey : blok; pointer-hodisalar: avtomatik; ) .Oyna > div (kengligi: 460px; joylashuvi: nisbiy; chekka: 10% avtomatik; toʻldirish: 30px 10px 10px; chegara radiusi: 10px; fon: #fff; quti-soya: 0px 0px 20px 2px; ) .close (fon: #cc3300; rang: #FFFFFF; chiziq balandligi: 25px; pozitsiya: mutlaq; oʻng: -12px; matnni tekislash: markaz; tepa: -10px; kenglik: 24px; matn -bezatish: yo'q; shrift-og'irligi: qalin; -webkit-chegara-radius: 12px; -moz-chegara-radius: 12px; chegara-radius: 12px; -moz-box-soya: 1px 1px 3px #000; -webkit -box-shadow: 1px 1px 3px #000;box-soya: 1px 1px 3px #000; ) .close:hover (fon: #990000; )
Biz saqlaymiz, siz uslublar bilan o'ynashingiz va chiroyliroq narsalarni qilishingiz, fonni o'zgartirishingiz, boshqa ramka yaratishingiz va hokazo. Ushbu oyna paydo bo'lishini xohlagan sahifaga o'ting va quyidagi kodni joylashtiring:
| 1 2 3 4 5 6 7 | < a href= "#ModalOpen" title= "" >Tugma < div id= "ModalOpen" class = "Window" > < div> < a href= "#close" title= "yaqin" class = "close" >XMana oynaning mazmuni |
Tugma
Keling, unda nima borligini biroz tahlil qilaylik, uni o'zgartirishingiz kerak. Qayerda yozilgan "tugma" u yerda siz rasm va matn kabi xohlagan narsani kiritishingiz mumkin, ya'ni ustiga bosganingizda oyna ochiladi. Qayerda yozilgan "Oyna mazmuni shu yerda bo'ladi" qalqib chiquvchi oynada ko'rmoqchi bo'lgan narsani qo'ying, bu hammasi.
YANGILIKLAR!
Xo'sh, oxirgi, lekin eng muhimi, yangiliklar, har doimgidek, men allaqachon yangiliklar bilan nimadir qilyapman)) Men o'zimga sheriklik dasturi bilan kichik sahifa yaratdim, ko'rinishida, hammadan unga borib ko'rishlarini so'rayman. Agar kimdir qiziqarliroq maslahat bersa, masalan, biror narsa qo'shish uchun, yaxshi, men nima haqida gapirayotganimni bilasiz. Hali bu borada ba'zi fikrlar bor, men bilan video qo'shish, balki ko'rsatma, yaxshi, shunga o'xshash narsa, umuman, sharhlaringizni kutaman!
