Bu yerni bosing!

Fotosurat uchun Javascript modal oynasi. Javob beruvchi jquery modal oynasini qanday yaratish kerak
CSS-da modal oynani yaratish bo'yicha maqolada biz modal oyna nima ekanligini va nima uchun kerakligini muhokama qildik. Va faqat CSS-dan foydalangan holda oyna yaratdi. Ushbu maqolada men javascript modal oynasini qanday yaratishni tasvirlab beraman. Aniqrog'i, yaratish uchun jquery kutubxonasidan foydalanamiz.
Va shuning uchun jquery-da modal oyna yaratishni boshlaymiz. Muammoni murakkablashtirish uchun quyidagi shartni qo'yamiz. Biz javob beradigan modalni yaratishimiz kerak bo'ladi. Va moslashuvchanlik, ekranning kichrayishi bilan oyna kamayib borishi bilan bog'liq. HTML formatlash bilan sezgir jquery modalini yaratishni boshlaymiz.
Bu yerni bosing!
X
Qo'ng'iroq qiling
Kod bilan hamma narsa aniq deb o'ylayman. Bizning saytimiz tarkibi joylashgan .wraper mavjud. Gowindow identifikatorlari bilan modal oynani, modal_window id bilan oynaning o'zi va myoverlay qatlamini chaqirish uchun tugma mavjud. Endi CSS uslublarini yozamiz.
Wraper (kengligi: 100%; margin: auto; width: auto; / * 100% * bilan bir xil / max-width: 960px; / * o'rashning maksimal kengligi * / border: 1px solid # 000; background-color: # F5F9FB;) .button (/ * ------- * /) #modal_window (kenglik: 34%; / * javob berish uchun * / balandlik: 300px; chegara radiusi: 10px; chegara: 3px #fff qattiq; fon : # e0e0e0; margin-top: -30%; margin-left: 33%; display: none; opacity: 0; / * animatsiya uchun to'liq shaffoflik * / z-index: 5000; / * oyna yuqori qatlam bo'lishi kerak * / padding-top: 20px; text-align: center; position: nisbiy;) #modal_window #window_close (width: 21px; height: 21px; position: mutlaq; top: 10px; right: 10px; kursor: pointer; display: block; ) #myoverlay (z-indeks: 3000; / * barcha qatlamlardan yuqori, ammo deraza ostidan * / pozitsiya: sobit; / * saytni qoplash uchun * / background-color: # 000; xira: 0,5; kenglik: 100%; balandlik: 100 %; / * to'liq ekran * / yuqori: 0; chap: 0; kursor: ko'rsatgich; displey: yo'q;)
Keling, CSS kodini tavsiflaymiz. Biz o'rash blokini moslashuvchan qilib o'rnatdik, u ekran o'lchamidan o'zgaradi, lekin 960 pikseldan oshmaydi. Men tugma kodini ko'rsatmayman. #Modal_window oynasining kengligi foizda o'rnatiladi, kengligi .wraper kengligiga bog'liq bo'ladi. Oynani markazlashtirish uchun marjni 33% ga sozlang. U 50% -17% deb hisoblanadi, bu erda 17% deraza kengligining yarmi. Displey bilan oynani yashiring: yo'q va noaniqlik: 0. #window_close va #myoverlay kodlari bilan hamma narsa aniq deb o'ylayman. Keling, jquery uchun bir nechta kod yozamiz. Jqery allaqachon ulangan deb taxmin qilaylik.
$ (document) .ready (function () ($ ("# gowindow"). (function () (// tugmasini bosing $ ("# myoverlay"). fadeIn (400, // overlay funktsiyasini ko'rsating)) ($ ("# # modal_window") .css ("display", "block") // oynani ko'rinadigan qilish. animatsiya ((xira: 1, tepa: "50%"), 200); // shaffoflikni oshiring, deraza silliq tashqariga chiqadi));)); / * oynani olib tashlang * / $ ("# window_close, #myoverlay"). tugmasini bosing (function () (// bir-birining ustiga chiqadigan qatlamni bosing yoki $ ("# modal_window") .animate ((xira) : 0, top: "45%"), 200, // shaffoflikni yoqing, oyna funktsiyasi ko'tariladi () ($ (this) .css ("display", "none"); // oynani ko'rinmas holga keltiring $ ("# myoverlay "). fadeOut (400); // ustki qatlamni olib tashlash));));));
Menimcha, Js kodi tushuntirishga muhtoj emas, chunki men uni juda yaxshi sharhladim. Men bu haqda hamma narsani o'ylayman, shuning uchun qisqacha bayon qilaylik. Biz oddiy javob beruvchi jquery modalini yaratdik