Maqolani oching Deraza uchun sarlavha Yorliqlar sayt yaratishda juda foydali va qulay bo'lib, ular sizga ma'lumotni to'g'ri tartibga solishga imkon beradi, bu esa saytda ozgina joy tejash imkonini beradi. Ovozingni o'chir Keyin biz sinf qo'shishimiz kerak

modal faol

, bu sinf modal oynani bosish uchun ko'rsatiladi, modal__sarlavhasi Bu oynaning sarlavhasi va stilizatsiyasini bildiradi.

Krok 2. CSS

Endi stilizatsiyaga, birinchi sinfga o'tamiz

maqola (fon: #fff; toʻldirish: 20px; pastki chet: 40px; chegara radiusi: 5px; ) .modal (ekran: yoʻq; joylashuv: belgilangan; tepa: 50%; kenglik: 100%; balandlik: avtomatik; chekka -tepasi: -150px;fon rangi: $rang-oq;border-radius:3px;z-indeks:999;box-soya:0px 1px 3px 0px qorayish($color-bg, 10%) ( chap: 50% ; margin-left: -260px; max-width: 520px; ) &.is-active (displey: blok; animatsiya: 1s : 1px qattiq qorayish($color-bg, 5%) .modal__footer (matnni tekislash: markaz; tugma (ekran: inline-bg; ) )

Uslublar oddiy, ular bitta faylda saqlanadi va ularni CSS bilan tanish bo'lgan sotuvchidan tahrirlashda asoratlardan qochishning hojati yo'q.

Krok 3. JS

Qolgan, ammo muhim bo'lmagan sozlamamiz menyu paydo bo'lganda fonni avtomatik ravishda o'rnatish, shuningdek, biz bir nechta oddiy qoidalardan foydalanishimiz mumkin bo'lgan bosish qobiliyatidir. JS:

$("tana").addClass("loyqalangan");

$(".toggleModal").on("klik", funksiya (voqea) ( event.preventDefault(); $(".modal").toggleClass("is-active"); $("tana").toggleClass ("loyqalangan");

Natijada, biz ko'rish oson va dizayningizni chalkashtirmaydigan ajoyib modal oynalarni yaratishimiz mumkin.

3. JQuery modal oynasiga misol, bosiladigan xabar (Demo bilan) Hammasi yaxshi, siz allaqachon Internetda bir necha marta sizib ketgan modal oynani yuklab oldingiz - ro'yxatdan o'tishni tasdiqlash, avans, Dovidkova haqida ma'lumot

, faylga qiziqish va boshqalar.

Ushbu darsda men eng oddiy modal oynalarni yaratish uchun bir qator butalar bilan tanishaman.
Modal oynani yaratish oson

Keling, eng oddiy modal oynaning kodini ko'rib chiqaylik, chunki u darhol paydo bo'ladi jQuery kodi Qaerda bo'lsangiz ham kodni joylashtiring

tanasi

Sizning sahifangiz.

Sahifani ko'rganingizdan so'ng, hech qanday buyruqlarsiz, siz shunga o'xshash narsani ko'rasiz: Va tajovuzkor kodning o'qi brauzerda butun sahifaga kirgandan so'ng ko'rsatiladi. Bizning ilovamizda siz rasmlari bo'lgan sahifaga qiziqqaningizdan so'ng, siz shunchaki oxirida paydo bo'lishingiz mumkin:

CSS modifikatsiyalari uchun jQuery modal oynasi

Keling, eshikka qadam qo'yaylik modal oyna postga bosilganda.

Fon butunlay qorong'i bo'ladi.

Keling, boshlanuvchilar uchun yozaylik.
Yoki biriktirilgan CSS faylida yoki ichida

JQuery kodida asosiy e'tibor modal oyna va niqobning joylashuviga qaratiladi, bunda bizning bosqichma-bosqich xiralashtirishimiz fonga qo'llaniladi.

Hurmat!

Hujjat boshiga kutubxonani kiritishni unutmang!

Kutubxonani Google veb-saytiga ulash.

Va nihoyat, jQuery kodining o'zi.

jQuery kodi

1. JQuery-dagi modal oyna "Simple Modal Box"

2. jQuery plagini "LeanModal"

Modal oynalarda birgalikda ko'rsatiladi.

Demo sahifasida plaginni amalda ko'rish uchun xabarni bosing: Ro'yxatdan o'tish shakli yoki Asosiy tarkib.

3. jQuery plagini “ToastMessage”

To'kilgan ma'lumotlar.

Plagin ikkita variantga ega.

Bir holatda, bildirishnomalar bir soatdan keyin o'z-o'zidan paydo bo'ladi, boshqa dasturda bildirishnomani yopish uchun tugmani bosishingiz kerak.

4. Modal oynaga nima quyiladi?

"Oshkora" plagini. Plaginni amalda ko‘rib chiqish uchun demo sahifasidagi “Fire A Reveal Modal” tugmasini bosing. 5. Yoqimli dialog oynalari

Plaginni amalda ko'rish uchun demo sahifasidagi xochni bosing.

6. Mootools modal oynasi, plagin "MooDialog"

7. jQuery ekrandagi panelni yashiradi

8. jQuery oqish oynasi

Formani ko'rsatish uchun jQuery plagini

qo'ng'iroqning qo'ng'irog'i to'kish oynasida. 10. Facebook muloqot oynalarini amalga oshirish uchun MooTools plagini "LightFace"

Facebook uslubidagi dialog oynalari.

Statik ma'lumotlarga qo'shimcha ravishda siz oynada tasvirlar, ramkalar va Ajax so'rovlarini joylashtirishingiz mumkin.

Plagin ishi keng qamrovli sozlangan, bu juda kuchli vosita.

Bu juda zamonaviy va funktsional ko'rinadi.

Turli dumbalarni birgalikda ko'rish uchun demo sahifasidagi havola orqali o'ting.

Vikoristaniya oynalarni birlashtirmasdan va sahifani qayta jalb qilmasdan joriy modal dialog oynalarini amalga oshirish.

Skriptni amalda ko'rish uchun demo sahifasida "Demoni boshlash" tugmasini bosing.

17. Prototype kutubxonasidan "Leightbox" plagini

Plagin modal oynalarda tarkibni ko'rsatadi. Siz ko'pincha modal oynalar bilan saytlarga kirishingiz mumkin va ularning barchasi uchun ishlatiladi turli xil buyurtmalar

. Darhaqiqat, sayt interfeysini yanada interaktiv va foydalanuvchilarga qulayroq qilish imkonini beruvchi harakatni bajarishga arziydi. Masalan, modal oynalar turli shakllar uchun ishlatilishi mumkin, masalan, avtorizatsiya shakli, darvoza shakli, mahsulotni ro'yxatdan o'tkazish shakli va boshqalar.

Ushbu postda biz JQuery va CSS yordamida modal oynani qanday yaratishni ko'rib chiqamiz.

dumba berilgan

JQuery kutubxonasining o'zi bundan mustasno, bu erda kerak emas. Biz modal oyna kodini sahifaga joylashtiramiz: uni yoping Modal oynani oching Belgilardan ko'rinib turibdiki, modal oyna bloki id= atributiga ega bo'lgan divdir modal_form qanday qasos elementi span c id= modal_yopish.

.

Ushbu element modal oynani yopish tugmasi bo'ladi, bundan tashqari, renderlash bloki ostida id= atributli div bloki mavjud.

qoplama Biz modal oyna kodini sahifaga joylashtiramiz: Bu bir soat davomida va fonni qoraytirish uchun ishlatilishi mumkin. modal_form Modal oyna buyurtma uchun mavjud, sinf bilan modal Modal oyna uchun CSS

#modal_forma (kenglik: 300px; balandlik: 300px; chegara radiusi: 5px; hoshiya: 3px #000 qatʼiy; fon: #fff; joylashuv: qatʼiy; tepa: 45%; chap: 50%; chet-usti: -150px; margin-left: -150px; displey: none; z-index: 5; padding: 20px 10px; ) #modal_form; fixed; background-color:#000; opacity:0,8;width:100%;height:100%;top:0;left:0;cursor: pointer;display: none; modal_yopish uchun modal_form) yoki yopish tugmasini bosing, ochiladigan menyuda id= bilan element oralig'i Modal oynani oching.

$(document).ready(function() ( $(".modal").click(funksiya(voqe)( event.preventDefault(); $("#overlay").fadeIn(400, //) animatsiyali displey qopqoq funksiyasi ()( // modal oynaning keyingi ekrani $("#modal_form") .css("displey", "blok") .animate((shaffoflik: 1, tepa: "50%"), 200) ; )); ));// modal oynani yoping $("#modal_close, #overlay").click(function())( $("#modal_form") .animate((shaffoflik: 0, top: "45 %"), 200 , // o'zgaruvchan ko'rinish funksiyasi())( // animatsiyadan keyin $(this).css("display", "none"); // oyna qo'shing $("#overlay").fadeOut (400); // astarni qo'shing );));

Jonlantirishga yordam berish uchun biz pozitsiyani vertikalga o'zgartiramiz yuqori, shuningdek tushuncha shaffoflik, va bu maqsadda bachadon bo'yni ta'siri yo'q qilinadi.

Xuddi shunday ta'sir oyna ochilganda ham, yopilganda ham sodir bo'ladi.
Bloklar uchun hokimiyatni o'rnatish tartibi o'zgarib borayotganining ahamiyati, shu bilan oynaning ochilishi va yopilishini ingl.

Turli xil veb-saytlarni ishlab chiqish usullari haqida gapirganda, modal oynalarni yaratish usullari haqida gapirmaslik oqilona bo'lardi.

Biz loyqa, modal oynalarni vikorizatsiya qilishning ahamiyati, rangi va muammolari haqida to'xtalmaymiz.

Keling, bunday oynalarni yaratishning ko'plab ilovalaridan birini ko'rib chiqaylik.

• , kabi maxsus plaginlarni ishlatish mumkin bo'lmagan holatlar mavjud, shuning uchun siz o'zingizning kuchingizni qanday yaratishingiz mumkinligini tushunishingiz mumkin.
• Keling, bu qanday ishlashiga hayron bo'laylik:
• HTML

< a href= "#?w=500" rel= "popup_name" class = "poplight" >Quyidagi atributlarga ega teglarni qo'shish vaqti keldi:

Quyidagi atributlarga ega teglarni qo'shish vaqti keldi:

href - #?w=500 oynaning kengligini bildiradi rel teri hududi uchun noyob atributdir class="poplight" - qalqib chiquvchi oynani ko'rsatish uchun sinf
Div V_kno in dii - Kenglik = 500px

U yon tomonning istalgan joyiga, masalan, joyning pastki qismiga joylashtirilishi mumkin.

Eslatib o'tamiz, drenaj oynasi identifikatori atributga mos keladi

rel teg Bu bir vaqtning o'zida ham yopishqoq, ham yopishqoq xabar. Matn nima bo'lishidan qat'iy nazar, ruh uchun nima yaxshi Shunday qilib, sahifamizdagi oynani joylashtirish bilan biz uni saralab oldik, endi uni qo'shimcha uslublardan foydalangan holda, munosib ko'rinadigan tarzda loyihalashtiramiz.

CSS tartibi /*Aniqroq bo'lishi uchun men derazamizning uslubi parametrlarini tushuntirish bosqichlarini yozdim. Oqish oynalarining bo'laklari sabab bo'lishi mumkin fon: rgba(7, 87, 207, 0,8); pozitsiyasi: qattiq; chap: 0; yuqori: 0; kengligi: 100%; balandligi: 100%; shaffoflik: .80; z-indeks: 9999;) .popup_block ( displey : none ; /*--prihovannyam--*/ fon: #fff;

#fade (displey: hech biri;/*--fon--*/ fon: rgba(7, 87, 207, 0.8); joylashuv: belgilangan; chap: 0; tepa: 0; kenglik: 100%; balandlik: 100% , shaffoflik: .80, z-indeks: 9999; suzuvchi: chap; shrift hajmi: 85%; pozitsiyasi: qattiq; yuqori: 50%; chap: 50%; rang: #000;

z-indeks: 99999; /*--CSS3 quti soyasi--*/ -webkit-box-shadow: 0px 0px 20px #000; -moz-box-soya: 0px 0px 20px #000; 20px #000;/*--CSS3 yumaloq burchaklar--*/ -webkit-border-radius: 12px;-moz-border-radius: 12px; chegara radiusi: 12px; to'ldirish: 0; chegara: 0; rang: #000; chiziq balandligi: 1.6;) .popup_block h2 ( hoshiya: 0px 0 10px; : markaz; matn soyasi: 1px 1px 2px #0D0C0C; ) /* yopish tugmachasini hosil qiling */ .close ( fon und-rang: rgba(61) , 61, 61, 0,8); chegara-radius: 50%; -moz-box-shadow: 1px 1px 3px #000; : "X" font-size: 12px; text-shadow: 0 -1px rgba(0, 0, 0, 0.9 ) .close: hover (fon rangi: rgba(252, 20, 0, 0.8); ) .shadow (box-shadow:4px 4px 10px #857373; -webkit-box-shadow:4px 4px 10px #857 box-shadow:4px 4px 10px #857373; padding:0; ) /*--IE6 uchun belgilangan joy -*/ *html #fade (pozitsiya: mutlaq; ) Kalıplanmış derazalar va yoga bilan tashqaridan ichkariga qaraydi h Iltimos, css ga yordam bering і, Menimcha, maxsus katlama buyumlari aybdor emas. Siz to'g'ridan-to'g'ri uslublarni yozishingiz mumkin HTML sahifalar

, teglar orasida

, yoki keyingi faylga uslublaringizni qo'shishingiz mumkin, faylga nom berishingiz mumkin

style.css , chunki birovning oilasi bilan nima bo'lyapti? JQuery-ni sozlash Modal oynaning to'g'ri ishlashi uchun siz kutubxonaning ishlashi bilan tanish bo'lmasangiz o'qishingiz mumkin bo'lgan jQuery-ni qo'shishingiz kerak.

Keling, oldinga boraylik. Siz buni o'zingiz qilishingiz mumkin Men versiyani saqlayman

Kutubxona veb-saytidan JQuery yoki yopilgan teg oldidagi bo'limda uni hujjatga ulaydigan Google faylidagi vikorystvovat joylashtirishlari

, quyidagi qatorni joylashtirish: Keling, keyingi bosqichning to'ldirish va funktsiyalarini ko'rib chiqaylik jQuery plagini$("a.poplight"). click(funksiya () ( var popID = $(bu). attr("rel" ) );//oyna nomini bekor qilish, yangilarini qo'shishda xabarning rel atributidagi nomni o'zgartirishni unutmaslik kerak. var popURL = $(bu) . attr("href");//o'lchamni hrefdan jo'natish atributiga olib tashlang // href url bilan o'zgarishlarni so'rang var query = popURL. Split("?"); var dim = so'rov [1]. "" ) ; Split("&"); var popWidth = xira [0]. split("=")[1]; //Men qatordagi birinchi qiymatni so'rayman//Oynaga yopish tugmasi qo'shing $("#" + popID). fadeIn(). " ) ; css(("kenglik": Raqam(popWidth))).. old qo'shish( // Biz markazda (vertikal va gorizontal) tekislash uchun chekka (chekka) o'rnatamiz - biz CSS-da belgilangan yozuvlarning balandligi / kengligi + ramkaning kengligi 80 qo'shamiz. var popMargTop = ($("#" + popID). height() + 80) / 2; var popMargLeft = ($("#" + popID) . width() + 80) / 2;//Kirish qiymatini o'rnating $("#" + popID). css(("margin-top": - popMargTop, "margin-left": - popMargLeft)); //Displeyga qorong'ulikni qo'shadi$("tana").

qo'shish (" //div konteyneri tegdan oldin yoziladi

$("#fade")..

$("#fade").css(("filtr" : "alfa(shaffoflik=80)")).fadeIn();

//to'pga nom, ahmoq IE uchun filtr noto'g'ri; ))).
//Oynani yoping va fonni qoraytiring $(document).on("click", "a.close, #fade", function() ( //bosilgan oyna bilan pozani yoping, shunda u o'chib ketadi. .. $( "#fade , .popup_block").fadeOut(function() ( $("#fade, a.close").remove(); // fade out ));

)))

Visnovok: Aytgancha, agar siz tarmoqqa kirmasangiz va gobbledygook kodlari bilan o'zingizni haddan tashqari oshirib yubormasangiz, bizning mo''jizaviy modal nihoyat ishga tayyor va sizning fikringizni matnga tarjima qilinishini kutmoqda, yoki
foydali ma'lumotlar Yangi video yoki katta hajmdagi tasvirlarda joylashtirish uchun modal oynadan foydalanmoqchi bo'lgan Tim, men haligacha maxsus plaginlar yordamida tezlikni qadrlayman, modal oynaning dumbasi ustida turuvchi bo'laklar, yorug'lik uchun foydaliroq va unchalik muhim emas. ma'lumot, garchi hech qanday muammo uchun emas. Keyingi safar biz uni aniq tanib olamiz va uni dumbada ko'rsatamiz va yakka holda, biz qalqib chiquvchi oynada boshqa uchinchi tomon ob'ektlari haqida bilib olamiz. Shunday ekan, internetda adashib qolmang va yangilanishlarni kuzatib boring!

Yangilash

: dm-modal.js v1.3 versiyasi (15/01/2017)