бұлыңғыр фоны бар jQuery модальды терезесі. CSS3 көмегімен бұлыңғыр фондық модальдар

Содан кейін біз сыныпты қосуымыз керек модаль белсенді, бұл класс модальды терезені шақыруға жауапты болады, модальды_тақырыптақырыпқа және оның терезе стиліне жауап береді.

2-қадам: CSS

Енді сәндеуге көшейік, бірінші қадам - ​​сынып түймесі,ол жауапты болады, сіз ойладыңыз, сайттағы түймелер үшін біз оған дұрыс дисплей параметрлерін орнаттық:

Түйме (фон: жоқ; фон-клип: толтыру-қорап; дисплей: кірістірілген-блок; жиек: 0; пайдаланушы-таңдау: жоқ; -webkit-touch-callout: жоқ; -webkit-appearance: түйме; -webkit-пайдаланушы -select: none; -moz-user-select: none; -ms-user-select: none; )

Контейнер (орн: салыстырмалы; шеті: 0 авто; максимум ені: 960 пиксель; қорап өлшемі: жиек қорабы; толтырғыштың жоғарғы жағы: 40 пиксель; )

Стильдер өте қарапайым, олар бөлек файлда сақталады және CSS-пен кездескен әзірлеушіге оларды өңдеу кезінде қиындық тудырмауы керек.

3-қадам JS

Біздің соңғы, бірақ маңызды емес, мәзір пайда болған кезде фонның автоматты түрде бұлыңғырлануы, сондай-ақ сілтемелердің басылуы, шағын ережелер бұл бізге көмектеседі. JS:

$("дене").addClass("бұлыңғыр"); $(".toggleModal").on("клик", функция (оқиға) ( event.preventDefault(); $(".modal").toggleClass("is-active"); $("body").toggleClass («бұлыңғыр»); ));

Нәтижесінде біз келушінің көзіне ұнайтын және дизайнды бұзбайтын тамаша модальды терезелерді аламыз.

Веб-сайттарда модальды терезелерді көру жиі кездеседі және олардың барлығы әртүрлі тапсырмалар үшін пайдаланылады. Шын мәнінде, бұл сайт интерфейсін интерактивті және ыңғайлы етуге мүмкіндік беретін өте қуатты құрал. Мысалы, модальды терезелерді авторизация пішіні, кері байланыс пішіні, өнімге тапсырыс беру сияқты әртүрлі пішіндер үшін пайдалануға болады және сіз ешқашан білмейсіз.

Бұл мақалада біз JQuery және CSS көмегімен қарапайым модальды терезені қалай жасауға болатынын қарастырамыз. Бұл мысалдың ерекшелігі, JQuery кітапханасының өзін қоспағанда, мұнда талап етілмейді.

Модальды терезенің кодын бетке орналастырамыз:

Белгілеуден көріп отырғаныңыздай, модаль блогының өзі id= төлсипаты бар div болып табылады. модальды_форма, онда id= бар span элементі бар modal_close. Бұл элемент модальды терезені жабу түймесі ретінде қызмет етеді, сонымен қатар блоктың астында id= атрибуты бар div блогы бар. қабаттасу, ол сонымен қатар өңді қараңғылауға қызмет етеді. Модальды терезе сыныппен бірге сілтеме арқылы ашылады модальды.

Модальды терезеге арналған CSS

#modal_form ( ені: 300px; биіктік: 300px; жиек-радиусы: 5px; жиек: 3px #000 тұтас; фон: #fff; орны: бекітілген; жоғарғы: 45%; сол жақта: 50%; жиек-жоғарғы: -150px; жиек-сол жақ: -150px; дисплей: жоқ; мөлдірлік: 0; z-индекс: 5; толтыру: 20px 10px; ) #модальды_форма #модальды_жабу (ені: 21px; биіктік: 21px; орын: абсолютті; жоғарғы: 10px; оң жақта: 10px; курсор: меңзер; дисплей: блок; ) #қабат ( z-индекс:3; орын: бекітілген; фон-түсі:#000; мөлдірлік:0,8; -moz-мөлдірлік:0,8; сүзгі: альфа(мөлдірлік=80) ; ені: 100%; биіктігі: 100%; жоғарғы: 0; сол жақ: 0; курсор: көрсеткіш; дисплей: жоқ; )

Үшін модальды_формабіз бекітілген ені мен биіктігін орнаттық, содан кейін позицияны экранның ортасына келтіреміз. Модальды терезенің астыңғы қабаты үшін ( қабаттасу) біз өлшемді экранның еніне орнатамыз, мөлдірлікпен толтырамыз, сонымен қатар оны әдепкі бойынша жасырамыз. ерекше сәтімен z-индекс, модаль беттегі барлық элементтердің ең үлкені болуы керек, ал мұқабада модальдың өзінен басқа барлық элементтердің ең үлкені болуы керек.

Енді ең негізгісі, бұл JavaScript коды. Модальды терезе үшін екі негізгі оқиға пайдаланылады, бұл оның ашылуы - классы бар элементті басу модальды, біздің жағдайда бұл сілтеме, ал модальды терезені жабу - қақпақты басу ( қабаттасу) немесе жабу түймесін басу, біздің жағдайда бұл id= бар аралық элементі modal_close.

$(құжат).ready(функция() ( $(".modal").click(функция(оқиға)( event.preventDefault(); $("#overlay").fadeIn(400, // мұқаба дисплейін жандандыру функция ()( // келесі режим терезесін көрсету $("#modal_form") .css("дисплей", "блок") .animate((мөлдірлік: 1, жоғарғы: "50%"), 200); ) ); )); // модальды терезені жабыңыз $("#modal_close, #overlay").click(function()( $("#modal_form") .animate((мөлдірлік: 0, жоғарғы: "45%") , 200, // мөлдірлік функциясын азайту()( // анимациядан кейін $(this).css("display", "none"); // терезені жасыру $("#overlay"). fadeOut(400); // фон жасыру)))))

Анимация көмегімен тік орынды өзгертеміз жоғарғысондай-ақ ашықтық мөлдірлік, және осының көмегімен біз қызықты әсер аламыз. Осыған ұқсас әсер терезе ашылғанда да, жабылған кезде де қолданылады. Айырмашылығы мынада, блоктар үшін сипаттарды қолдану тәртібі өзгереді, осылайша терезенің ашылуы мен жабылуы визуалды түрде көрсетіледі.

Сайтты құрудың әртүрлі әдістері туралы айтатын болсақ, модальды терезелерді жасаудың кейбір жолдары туралы айтпау абсурд болар еді. Қалқымалы, модальды терезелерді пайдаланудың мақсаты, пайдалылығы және туындайтын проблемалары туралы айтпаймыз. Осындай терезелерді жасаудың көптеген мысалдарының біреуін ғана қарастырайық.
Арнайы плагиндерді пайдалану мүмкін болмайтын жағдайлар бар, мысалы, және, сондықтан өзіңізді қалай жасауға болатынын түсінген жөн.

Мұны қалай жасау керектігін көрейік:

HTML

Келесі атрибуттары бар тегтерді қосудан бастайық:

• href - #?w=500 терезенің енін көрсетеді
• rel - әрбір терезе үшін бірегей атрибут
• class="poplight" – қалқымалы терезені көрсетуге арналған сынып

Терезе әрекетін қараңыз - Ені = 500px

Әрі қарай, қалқымалы терезе үшін кірістірілген түзетуді жасауымыз керек. Сіз оны беттің кез келген жерінде, мысалы, мазмұнның төменгі жағында орналастыра аласыз. Қалқымалы терезе идентификаторы төлсипатқа сәйкес келетінін ескеріңіз релтег
Бұл сілтеме мен қалқымалы терезені біріктіреді.

Сонымен, біз тереземіздің бетте орналасуын анықтадық, енді оны стильдермен безендірейік, былайша айтқанда, оған лайықты көрініс берейік.

CSS орналасуы

Түсінікті болу үшін мен тереземіздің стиль параметрлері үшін кейбір түсініктемелер жаздым. Қалқымалы терезелердің өлшемдері әртүрлі болуы мүмкін болғандықтан, біз CSS-те көрсетпейміз қалқымалы_блоктерезенің шеттерін, қажетті өлшемді есептеңіз, бұл тек тапсырма.

#fade (дисплей: ешқайсысы;/*--әдепкі бойынша жасырын--*/ фон: rgba(7, 87, 207, 0,8); орны: бекітілген; сол жақта: 0; жоғарғы: 0; ені: 100%; биіктік: 100%; мөлдірлік: .80; z-индекс: 9999; ) .popup_block (дисплей: ешқайсысы; /*--әдепкі бойынша жасырын--*/ фон: #fff; толтыру: 20px; жиек: 8px қатты rgb(134, 134, 134); қалқымалы: солға; қаріп өлшемі: 85%; орны: бекітілген; жоғарғы: 50%; солға: 50%; түсі: #000; макс-ені: 750px; мин-ені: 320px; биіктік: авто ; z-индекс: 99999; /*--CSS3 қорап-көлеңке--*/ -webkit-box-shadow: 0px 0px 20px #000;-moz-box-shadow: 0px 0px 20px #000; box-shadow: 0px 0px 20px #000; /*--CSS3 бұрышты дөңгелектеу--*/ -webkit-border-radius: 12px; -moz-border-radius: 12px; border-radius: 12px; ) .popup_block p ( қаріп салмағы: 400 ; толтыру: 0; жиек: 0; түсі: #000; сызық биіктігі: 1,6;) : орталық; мәтіндік көлеңке: 1px 1px 2px #0D0C0C; ) /* жабу түймесін жасаңыз */ .close ( backgro) und-color: rgba(61, 61, 61, 0,8); жиек: 2px қатты #ccc; биіктігі: 25px; сызық биіктігі: 20px; позициясы: абсолютті; оң жақ: -17px; шрифт салмағы: қалың; мәтінді туралау: ортасына; мәтінді безендіру: жоқ; толтыру: 0; жоғарғы: -17px; ені: 25px -webkit-border-радиусы: 50%; -moz-шекаралық радиус: 50%; -ms-шекаралық радиус: 50%; -o-шекаралық радиусы: 50%; шекара радиусы: 50% -moz-box-shadow: 1px 1px 3px #000; -webkit-box-shadow: 1px 1px 3px #000; қорап-көлеңке: 1px 1px 3px #000; ) .жабу:бұрын (түсі: rgba(255, 255, 255, 0,9); мазмұн: «X»; қаріп өлшемі: 12px; мәтіндік көлеңке: 0 -1px rgba(0, 0, 0, 0,9); ) .close:hover (фон түсі: rgba(252, 20, 0, 0,8); ) .shadow (box-shadow:4px 4px 10px #857373; -webkit-box-shadow:4px 4px 10px #857373; -moz- box-shadow:4px 4px 10px #857373; padding:0; ) /*--IE6 үшін бекітілген позициялау--*/ *html #fade (позиция: абсолютті; ) *html .popup_block (позиция: абсолютті; )

Терезенің қалыптасуымен және оның сыртқы түрібірге css, Менің ойымша, ерекше қиындықтар болмайды. Стильдерді тікелей жазуға болады HTML беті, тегтер арасында және, немесе сіз оны апара аласыз бөлек файлстильдеріңіз, әдетте осы файл style.css, немесе сол сияқты нәрсе.

jQuery орнату

Модальды терезенің толық жұмыс істеуі үшін сіз осы кітапхананың жұмысымен таныс емес jQuery-ді қосуыңыз керек, сіз оқи аласыз.

Жарайды, әрі қарай жүреміз. сіз көбіне аласыз соңғы нұсқасы jQuery кітапханасының веб-сайтынан немесе жабылатын тегтің алдындағы бөлімде оны құжатқа қосатын Google жүйесінде орналасқан бөлек файлды пайдаланыңыз.осы жолды орналастыру арқылы:

Келесі қадамда біз jQuery плагинінің толтырылуы мен функцияларын қарастырамыз, қалқымалы тереземізді белсендіру үшін кодта не істеп жатқанымызды жақсы түсіну үшін кейбір түсініктемелер бар.

jQuery плагині

$(document).ready(function()( // Poplight класы және href тегі атрибуты бар сілтемені басқанда c # $("a.poplight").click(function() ( var popID = $(this).attr("rel"); //біз терезе атын аламыз, атауды өзгертуді ұмытпау маңызды жаңаларын қосқанда сілтеменің rel атрибутында var popURL = $(this).attr("href"); //сілтеменің href атрибутынан өлшемді алыңыз // href url-ден сұрау және айнымалы мәндер var query= popURL.split( "?"); var dim= query.split( "&"); var popWidth = dim.split("="); //бірінші сұрау жолының мәні //Терезеге жабу түймесін қосу $("#" + popID).fadeIn().css(( "ені": Number(popWidth) )).prepend(""); //Ортаға туралау үшін (тік және көлденең) жиекті (шекті) анықтаңыз - биіктікке 80 қосамыз /ені қоса толтыру + шекара ені css файлында анықталған popMargTop = ($("#" + popID).height() + 80) / 2; var popMargLeft = ($("#" + popID).width() + 80 ) / 2; //Толтыру көлемін орнату $("# " + popID).css(( "margin-top" : -popMargTop, "margin-left" : -popMargLeft )); //Мөлдір қараңғы фон қосу $("дене").қосу("

Жалпы, егер сіз жабайы табиғатқа бармасаңыз және өзіңізді шамадан тыс кодтық сөздермен жүктемесеңіз, біздің тамаша модальды терезе жұмыс істеуге дайын және сіздің ойларыңызды мәтінге немесе кез келген басқа түрге көшіруді күтеді. пайдалы ақпарат.
Бейне немесе ауқымды кескіндерді орналастыру үшін модальды терезені пайдаланғысы келетіндерге, дегенмен, мен сияқты арнайы плагиндерді қолдануға кеңес бердім, өйткені модальды терезенің жоғарыдағы мысалы жеңіл және аса ауыр емес ақпаратқа арналған, бірақ бұл қаласаңыз, проблема емес.

Келесі жолы мен міндетті түрде мысалмен айтамын және көрсетемін, және көпшілік қалқымалы терезеде басқа үшінші тарап нысандары туралы білуге ​​қызығатыны сөзсіз. Сондықтан хабардар болыңыз және жаңартуларды күтіңіз!

Жаңарту: dm-modal.js v1.3 нұсқасы (15/01/2017)
Түзетілді: href*=\\# синтаксисін пайдаланып, ескірген .live() функциясы ауыстырылды. Плагин енді жұмыс істейді ағымдағы нұсқалар jQuery кітапханалары

Бар болғаны! Сізге тағы бір пайдалы сабақ аласыз деп үміттенемін.

Құрметпен Андрей