У домаинтересноЗатъмняване на фона при изскачане на модален прозорец. Замъглени модални фонове с CSS3. Красиви диалогови прозорци
Затъмняване на фона при изскачане на модален прозорец. Замъглени модални фонове с CSS3. Красиви диалогови прозорци
Доста обичайно е да видите модални прозорци на уебсайтове и всички те се използват за различни задачи. Всъщност това е доста мощен инструмент, който ви позволява да направите интерфейса на сайта по-интерактивен и удобен. Например, модалните прозорци могат да се използват за различни формуляри, като формуляр за оторизация, формуляр обратна връзка, поръчване на стоки и никога не се знае.
В тази публикация ще разгледаме пример за това как да направите прост модален прозорец с използвайки jQueryи CSS. Особеност този примерв това, че не се изисква тук, добре, с изключение на самата библиотека jQuery.
Поставяме кода на модалния прозорец на страницата:
близо
Отворете модален прозорец
Както можете да видите от маркирането, блокът на самия модал е div с атрибут id= модална_форма, който съдържа елемента span с id= modal_close. Този елемент ще служи като бутон за затваряне на модалния прозорец, освен това под блока има div блок с атрибут id= наслагване, който служи и за затъмняване на фона. Модалният прозорец ще бъде отворен чрез връзка с класа модален.
За модална_формазададохме фиксирана ширина и височина и след това центрирахме позицията към центъра на екрана. За подложката на модалния прозорец ( наслагване) задаваме размера на ширината на екрана, запълваме с прозрачност и също го скриваме по подразбиране. специален момент с z-индекс, модалът трябва да има най-големия от всички елементи на страницата, а корицата трябва да има най-големия от всички елементи с изключение на самия модал.
Сега към най-основното, това е javascript кодът. За модалния прозорец ще се използват две основни събития, това е неговото отваряне - щракване върху елемент с класа модален, в нашия случай това е връзка, а затварянето на модалния прозорец е щракване върху корицата ( наслагване), или щракване върху бутона за затваряне, в нашия случай това е span елемент с id= modal_close.
$(document).ready(function() ( $(".modal").click(function(event)( event.preventDefault(); $("#overlay").fadeIn(400, // анимиране на дисплея на корицата функция ()( // следващо показване на мод. прозорец $("#modal_form") .css("дисплей", "блок") .animate((непрозрачност: 1, отгоре: "50%"), 200); ) ); )); // затваряне на модалния прозорец $("#modal_close, #overlay").click(function()( $("#modal_form") .animate((opacity: 0, top: "45%") , 200, // намаляване на прозрачността function()( // след анимация $(this).css("display", "none"); // скриване на прозорец $("#overlay"). fadeOut(400); // скрий фона ) ); )); ));
С animate променяме вертикалната позиция Горна часткакто и прозрачност непрозрачност, и с това получаваме интересен ефект. Подобен ефект се използва както при отваряне на прозореца, така и при затваряне. Разликата е, че редът на прилагане на свойства за блокове се променя, като по този начин се визуализира отварянето и затварянето на прозореца.
3. Пример за jQuery модал, извикан чрез връзка (с демонстрация)
Най-вероятно вече сте виждали изскачащ модален прозорец повече от веднъж в Интернет - потвърждение за регистрация, предупреждение, референтна информация, качване на файлове и др. В този урок ще предложа някои примери за това как да създадете най-простите модални прозорци.
Създайте прост модален изскачащ прозорец
Нека започнем да разглеждаме кода на най-простия модален прозорец, който веднага ще се появи jquery код
Поставете кода навсякъде тяловашата страница. Веднага след зареждане на страницата, без никакви команди, ще видите прозорец като този:
Но следният код ще бъде изпълнен след зареждане на цялата страница в браузъра. В нашия пример, след зареждане на страницата с изображения, ще се появи обикновен изскачащ прозорец:
Извикване на jQuery модал от връзка с CSS
Следващата стъпка е да създадете модален прозорецкогато щракнете върху връзката. Фонът бавно ще потъмнее.
Често можете да видите, че формулярите за вход и регистрация се намират в такива прозорци. Да се залавяме за работа
За да започнем, нека пишем html част. Ние поставяме този код в тялото на вашия документ.
Извикване на модален прозорец
Модален текст на прозорец
близо
Текст в модалния прозорец.
CSS код. Или в отделен css файл, или в
В кода на jQuery ще се фокусираме върху позицията на модала и маската, в нашия случай, постепенното потъмняване на фона.
внимание! Не забравяйте да включите библиотеката в главата на документа!
Свързване на библиотеката от сайта на Google. Е, самият код на jQuery.
jQuery код
Модалните прозорци са неразделна част модерен уеб дизайн, използвайки ги, разработчикът може да прибегне до метода на циклично преминаване на една страница и да не пренасочва посетителя към спомагателни страници. В този урок ще разгледаме как да създадете страхотни модални прозорци с размазан фон за уебсайт с използвайки jQueryи CSS3. Благодарение на тези правила ще създадем размазан фон при появяване на прозореца, който ще привърже погледа на посетителя само към необходимата информация в сайта.
Замъглени модални фонове с CSS3
Икономическите новини са най-добрите само тук: Дробаха
Анимацията на прозореца ще бъде настроена по такъв начин, че когато щракнете върху бутона за изглед, прозорецът ще се анимира отгоре надолу, като автоматично увеличава замъгляването на фона.
Стъпка 1: HTML
Ще имаме контейнер, който ще съдържа: заглавие, описание, след което добавяме клас за бутона с класа toggleModalза да отворите модален прозорец:
заглавка
Описание
Заглавие за прозореца
Разделите са много интересно и удобно нещо при създаването на сайт, което ви позволява правилно да организирате информация, като същевременно спестявате малко място на сайта.
След това трябва да добавим клас модален е-активен, този клас ще отговаря за извикването на модалния прозорец, модална_заглавкаотговаря за заглавието и неговия стил на прозореца.
Стъпка 2: CSS
Сега да преминем към стайлинга, първата стъпка е класът бутон,който ще отговаря, познахте, за бутоните на сайта, задаваме правилните параметри на показване за него:
Бутон (фон: няма; фонов клип: поле за подложка; дисплей: вграден блок; рамка: 0; избор на потребител: няма; -webkit-touch-callout: няма; -webkit-appearance: бутон; -webkit-потребител -select: няма; -moz-user-select: няма; -ms-user-select: няма; )
Стиловете са доста прости, те се съхраняват в отделен файл и не трябва да създават трудности при редактирането им за програмист, който някога е срещал CSS.
Стъпка 3JS
Последното ни, но не по-малко важно, ще бъде инсталирането на автоматично замъгляване на фона, когато се появи менюто, както и кликаемостта на връзките, малки правила ще ни помогнат с това. JS:
$("body").addClass("is-blurred"); $(".toggleModal").on("щракване", функция (събитие) ( event.preventDefault(); $(".modal").toggleClass("is-active"); $("body").toggleClass ("е-замъглено"); ));
В резултат на това получаваме прекрасни модални прозорци, които са приятни за окото на посетителя и не претрупват вашия дизайн.
1. Модален прозорец на jQuery "Simple Modal Box"
2. jQuery плъгин "LeanModal"
Показване на съдържание в модални прозорци. За да видите приставката в действие на демонстрационната страница, щракнете върху връзката: Формуляр за регистрация или Основно съдържание.
3. jQuery плъгин "ToastMessage"
Изскачащи съобщения. Плъгин в две версии. В един случай съобщенията изчезват сами, след определено време, във второто изпълнение, за да затворите съобщението, трябва да кликнете върху бутона.
4. Съдържание, което изскача в модалния прозорец
Плъгин за разкриване. За да видите плъгина в действие, щракнете върху бутона „Fire A Reveal Modal“ на демонстрационната страница.
5. Красиви диалогови прозорци
Кликнете върху кръста на демонстрационната страница, за да видите плъгина в действие.
6. Mootools Modal Window, MooDialog Plugin
7. Изскачаща лента на jQuery в горната част на екрана
8.jQuery изскачащ прозорец
jQuery плъгин за показване на формуляр за контакт в изскачащ прозорец.
10. MooTools "LightFace" плъгин за внедряване на Facebook диалози
Диалогови прозорци в стил Facebook. В допълнение към статичната информация можете да поставяте изображения, рамки, Ajax заявки в прозорци. Много настройки за плъгина, много мощен инструмент. Изглежда много стилно и функционално. Следвайте връзките на демонстрационната страница, за да видите примери с различно съдържание.
11. Модален прозорец на jQuery
Чист изскачащ диалогов прозорец на jQuery.
12. jQuery Modals
Хубави модални изскачащи прозорци. Три стила. Демонстрационната страница има 3 връзки за извикване на прозорци.
13. jQuery Modals
Изскачащи модални прозорци от няколко вида. За да видите плъгина в действие, щракнете върху връзката на демонстрационната страница.
15. Изскачащо съобщение в горната част на страницата
Съобщението се показва в горната част на страницата, която от своя страна е затъмнена. Кликнете върху етикета „Щракнете върху мен“ на демонстрационната страница, за да видите изскачащо съобщение. Щракването върху кръста ще го затвори. Реализирано с jQuery.
16. Модален прозорец "ModalBox" в javascript
Внедряване на модерни модални диалози без използване на изскачащи прозорци и презареждане на страници. На демонстрационната страница щракнете върху бутона „Стартиране на демонстрация“, за да видите как работи скриптът.
Плъгин за показване на съдържание в модални прозорци.
Говорейки за различните техники за изграждане на сайт, би било абсурдно да не говорим за някои от начините за създаване на модални прозорци. Няма да говорим за предназначението, полезността и възникващите проблеми при използването на изскачащи, модални прозорци. Нека да разгледаме само един от многото примери за създаване на такива прозорци. Има ситуации, когато не е възможно да използвате специални плъгини, например като и, така че си струва да разберете как можете да създадете свои собствени.
Нека да видим как да го направим:
HTML
Нека започнем с добавяне на тагове със следните атрибути:
href - #?w=500 определя ширината на прозореца
rel е уникален атрибут за всеки прозорец
class="poplight" – клас за показване на изскачащ прозорец
<
a href=
"#?w=500"
rel=
"popup_name"
class
=
"poplight"
>Вижте Прозорец в действие - Ширина = 500px
Вижте Прозорец в действие - Ширина = 500px
След това трябва да създадем вграденото маркиране за изскачащия прозорец. Можете да го поставите навсякъде на страницата, например в долната част на съдържанието. Имайте предвид, че идентификаторът на изскачащия прозорец съответства на атрибута отнетикет Това ще свърже връзката и изскачащия прозорец заедно.
заглавка
Всеки текст, който харесвате
И така, разбрахме разположението на нашия прозорец на страницата, сега нека го украсим с помощта на стилове, да му дадем приличен вид, така да се каже.
CSS оформление
За по-голяма яснота съм написал някои обяснения за стиловите параметри на нашия прозорец. Тъй като изскачащите прозорци могат да имат различни размери, ние не определяме в CSS popup_blockръбовете на прозореца, изчислете необходимия размер, това е само задачата за .
С образуването на прозореца и неговата външен видизползвайки css, мисля, че няма да има особени трудности. Стиловете могат да бъдат написани директно върху HTML страница, между тагове
и, или можете да го поставите в отделен файл на вашите стилове, обикновено този файл style.css, Или нещо такова.
настройка на jquery
За пълната работа на модалния прозорец трябва да свържете jQuery, които не са запознати с работата на тази библиотека, можете да прочетете.
Е, ще продължим. можете най-много последна версия jQuery от уебсайта на библиотеката или използвайте отделен файл, хостван в недрата на Google, свързвайки го с документа, в секцията преди затварящия маркер
като поставите този ред:
В следващата стъпка помислете за пълнежа и функциите плъгин jquery, за да активирате нашия изскачащ прозорец, кодът съдържа някои обяснения, за по-добро разбиране на това, което правим.
плъгин jquery
$(документ) . готов(функция()( //Когато щракнете върху връзка с poplight на класа и атрибута href на тага с #$("a.poplight" ) . click(function () ( var popID = $(this) . attr("rel" ) ); //получаваме името на прозореца, важно е да не забравяме да променим името в rel атрибута на връзката, когато добавяме нови var popURL = $(това) . attr("href") ; // вземете размера от атрибута href на връзката//заявка и променливи от href url varquery=popURL. разделяне ("?"); var dim= query[ 1 ] . разделяне ("&"); var popWidth = dim[ 0 ] . split("=" ) [ 1 ] ; //първа стойност на низ на заявка// Добавете бутон за затваряне към прозореца$("#" + popID) . избледнява() . css(( "width" : Number( popWidth ) ) ). предваря( ""
)
;
//Определяне на margin(margin) за централно подравняване (вертикално и хоризонтално) - добавяме 80 към височина/ширина, включително подложка + ширина на границата, дефинирана в css var popMargTop = ($("#" + popID). височина() + 80) / 2; var popMargLeft = ($("#" + popID) . width() + 80 ) / 2 ; //Задайте размера на отстъпа$("#" + popID) . css(( "margin-top" : - popMargTop, "margin-left" : - popMargLeft ) ) ; // Добавяне на полупрозрачен засенчващ фон$("тяло") . добави (" "
)
;
//div контейнерът ще бъде написан преди тага.
$("#избледняване") . css(( "филтър" : "алфа(непрозрачност=80)" ) ) . избледнява() ; // полупрозрачност на слоя, филтър за тъп IEвръща невярно; ) ) ; //Затворете прозореца и затъмнете фона$(документ) . on("click" , "a.close, #fade" , function () ( //затваряне при щракване извън прозореца, т.е. на заден план...$("#fade , .popup_block" ) . fadeOut(function () ( $("#fade, a.close" ) . remove() ; // отминава) ) ; връща невярно; ) ) ; ) ) ;
Като цяло, ако не навлизате в джунглата и не се натоварвате с прекомерна кодова абракадабра, нашият прекрасен модален прозорец е готов за работа и чака мислите ви да бъдат транскрибирани в текст или във всеки друг полезна информация. За тези, които биха искали да използват модален прозорец, за да поставят видео или мащабни изображения в него, все пак посъветвах да използват специални добавки като , тъй като горният пример за модален прозорец е предназначен повече за лека и не много тежка информация, въпреки че това не е проблем при желание.
Следващия път определено ще разкажа и покажа с пример и със сигурност мнозина ще се интересуват да научат за други обекти на трети страни в изскачащия прозорец. Така че следете и следете за актуализации!
Актуализация: Версия dm-modal.js v1.3 (01/15/2017) Поправено: Заменена остарялата функция .live(), като се използва синтаксис href*=\\#. Плъгинът вече работи с текущи версии jQuery библиотеки
Това е всичко! Надявам се да получите още един полезен урок.
