Ръководство за употреба на модални кутии с Javascript, HTML и CSS

Наскоро направих скока от създаването на fullstack Ruby приложения до работата с Javascript. Както може би вече знаете, Javascript позволява на потребители или клиенти да взаимодействат с уеб страница и динамично да предоставят ново съдържание на DOM въз основа на интерактивността на потребителя. В сравнение с кодирането в Ruby on Rails (при което всяко рендериране се нуждае от опресняване на цяла страница), възможността за повторно представяне на различни елементи на страницата въз основа на взаимодействието на потребителя с Javascript доведе моите умения за разработване на фронтенд от 1994 г. и до днес. С рудиментарното си разбиране на Javascript сега мога да създам интерактивен уеб елемент, който с нетърпение очаквам да прилагам в моите проекти: кутии за съобщения - или изскачащи прозорци.

Модален или диалогов прозорец е поле за съобщения, което се появява в браузъра след определена интерактивност на потребителя. Преди да се потопим в спецификата на създаването на модална кутия за вашия сайт с HTML, CSS и Javascript, нека първо прегледаме различните видове полета за съобщения, които може да срещнете.

Видове кутии за съобщения

Сигнали

Предупреждението е поле за съобщения, обикновено заключено в браузъра, което изисква реакция на потребителя или взаимодействие, преди да може да бъде отхвърлена и да изчезне от страницата. Може би искате клиентът да потвърди информация (Условия за ползване) или самата страница потвърждава попълването на формуляр. Въпреки това, докато сигналът не бъде отхвърлен, клиентът не може да взаимодейства с останалата част от страницата.

Поле за съобщение за предупреждение

Popup

Изскачащото меню е лепкаво (помислете „залепва“ към страницата, а не лепкаво като бонбони) поле за съобщения, което се появява в браузъра, което не изисква незабавно взаимодействие или внимание. Ако потребителят иска да изчезнат, той трябва да затвори или да взаимодейства с изскачащото меню по това време, но интерактивността на останалата част от страницата все още е функционална. Известията са пример за изскачащ прозорец.

Изскачащо поле за съобщения

Уведомление за ръст / известие за флаш

Известието за ръмжене е изскачащо меню, което се отхвърля след свързан период от време. Те понякога се наричат ​​и известия за светкавица. Потребителят може да взаимодейства с известието за ръмжене - може би да отхвърли полето за съобщения по-рано или да натисне бутон в рамките на уведомлението - или може да избере да игнорира и то ще изчезне след изтичане на таймера. Подобно на изскачащ прозорец, известието за ръмжене позволява на клиента да продължи да взаимодейства с останалата част от страницата. Пример за това е известие по имейл или социални медии.

Уведомяване за Growl

Lightbox / Театър

Лайтбокс или театър е поле за съобщения, което обикновено разширява съдържанието, което вече е било достъпно в браузъра, за да може потребителят да се съсредоточи върху него. Често срещана употреба е изображение или серия от изображения, показани в галерия. Когато лайтбокс или театър се използва с множество части съдържание, се счита за „заключен“, когато потребителят може да се движи през свързаното съдържание в самата лайтбокс, вместо да се върне до оригиналната страница и след това да кликне върху следващото изображение от поредицата за уголемяване.

Lightbox / Театър

Изскачащ / визитки

Едно от по-малките полета за съобщения, popover или hovercard се появява на екрана само когато потребителят задържи мишката си върху избрана област. Тези полета за съобщения могат да съдържат инструкции или обяснения относно бутона или контейнера, над които потребителят в момента задържи курсора; те могат също да съдържат предварителен преглед на наличната информация, ако потребителят кликне върху връзка.

Изскачащ / визитки

Модален / диалогов прозорец

И накрая, модален или диалогов прозорец е поле за съобщения, което позволява по-нататъшна интерактивност на страницата, без да се отдалечава от текущото съдържание в браузъра. Модалната кутия не се заключва към екрана (т.е. клиентът може да се придвижва далеч от него без задължително взаимодействие), въпреки че обикновено това е фокусът на потребителя (въз основа на вашия стил на кутията). В повечето случаи, ако потребителят иска да отхвърли модала, той може просто да затвори кутията с предоставен бутон или да кликне извън модала. Пример за модал е, когато потребителят трябва да попълни формуляр или да предостави конкретна информация за заявка за търсене, но не искате те да преминават към друга страница.

Модален / диалогов прозорец

Прилагане на модал

За да създадете и внедрите модал на страницата си, има три стъпки, които трябва да изпълните за функционалност:

  1. HTML: маркиране за създаване на модалния елемент
  2. CSS: стайлинг, за да определите как изглежда вашият модал и се показва на страницата
  3. Javascript: поставяне на слушатели на събития, така че модалът да се появява / изчезва в зависимост от интерактивността на вашия потребител

HTML

За най-простия от модалите ни е необходим бутон (или какъвто и да е елемент на страницата, който предпочитате), на който потребителят може да кликне, за да активира модала, реалния модал и вероятно ще искате да приложите бутон за затваряне в рамките на модала.

В горното можете да видите, че имаме бутон, който ще се появи в нашия HTML, както и модален, с три CSS класа: modal, modal-btn и close-btn. Всяко от тях ще бъде включено в CSS по-долу. Първият div е родителският контейнер, който съдържа целия модал с клас модал. Вътрешно имаме div, който съдържа съдържанието на самия модал: бутона за затваряне на модала в обхвата и текста в ptag.

Като бърз настрана можете също да внедрите заглавки и долни колонтитули във вашия модал, като просто създадете повече divs в HTML и допълнителни CSS класове за стилистични цели. Например:

CSS

За да стилизираме всеки от елементите в нашия прост HTML модал, трябва да създадем асоциираните класове CSS: .modal, .modal-content и .close-btn. По-нататък можете да видите по-долу, че има и включен CSS за създаване на анимация за модала.

.modal {
  дисплей: няма;
  позиция: фиксирана;
  подложка: 50px;
  вляво: 0;
  отгоре: 0;
  ширина: 100%;
  височина: 100%;
  цвят на фона: rgb (0, 0, 0);
  цвят на фона: rgba (0, 0, 0, 0,5);
}
.modal-content {
  позиция: относителна;
  цвят на фона: бял;
  подплънки: 20px;
  марж: автоматично;
  ширина: 75%;
  -webkit-animation-name: animatetop;
  -webkit-анимация-продължителност: 0.4s;
  анимация-име: animatetop;
  продължителност на анимацията: 0,4s
}
.close-btn {
  плувка: дясно;
  цвят: светлосив;
  размер на шрифта: 24px;
  шрифт: удебелен шрифт;
}
.close-btn: задръжте {
  цвят: darkgray;
}
@ -webkit-keyframes animatetop {
  от {top: -300px; непрозрачност: 0}
  до {top: 0; непрозрачност: 1}
}
@keyframes animatetop {
  от {top: -300px; непрозрачност: 0}
  до {top: 0; непрозрачност: 1}
}

В горните класове имаме стайлинг за всеки от елементите, които създадохме в нашия HTML.

Самият клас .modal има атрибути, които определят как се отнася към страницата зад самия модал: ширина и височина в сравнение със страницата зад диалоговия прозорец, цвят (в този пример се използва полупрозрачно сиво) и настройка за видимост, така че че можем да го превключим в нашия Javascript, когато потребител натисне бутона.

За действителния диалогов прозорец имаме и отделен стил в .modal-content: позиционирането му спрямо фоновия стил, цвят на фона за самия диалогов прозорец, подплънка и в този пример е включена анимация, така че модалът да падне от горната част на страницата.

Освен това оформихме клас .close-btn, който плава с x надясно, и с .close-btn: задръжте, когато потребителят задържи бутона за затваряне, цветът ще се промени. За по-голяма яснота, потребителят може да кликне извън модала, за да затвори диалоговия прозорец, както при натискане на бутона за затваряне. Ще създадем слушател на събития и за двете опции в нашия Javascript.

Това едва надрасква повърхността на CSS, която бихте могли да внедрите сами. Чувствайте се свободни да коригирате горния код, за да отговаря най-добре на вашите собствени нужди.

Javascript

И накрая, трябва да напишем малко Javascript, за да създадем функционалността на модала.

нека modalBtn = document.getElementById ("modal-btn")
нека modal = document.querySelector (".. modal")
нека closeBtn = document.querySelector (". close-btn")
modalBtn.onclick = функция () {
  modal.style.display = "блок"
}
closeBtn.onclick = функция () {
  modal.style.display = "няма"
}
window.onclick = функция (д) {
  ако (напр. цел == модален) {
    modal.style.display = "няма"
  }
}

Избрахме няколко обекта от нашия HTML и ги присвоихме на променливи: modal-btn, самият модал и close-btn. Тогава ние създаваме слушатели на събития за събития onclick Когато потребителят кликне върху modal-btn, стилът на дисплея е зададен на "block", но когато кликне върху close-btn или прозореца извън модалния (представен в нашия стил като полупрозрачен сив цвят), След това стилът на дисплея е зададен на "няма". Това ефективно скрива модала, докато отново кликнат върху modal-btn.

Модален отпечатан на екрана

Като цяло играта с DOM с Javascript беше невероятно забавна и възнаграждаваща като начален кодер. Надяваме се, че горният код ще ви помогне и сами да внедрявате модали и кутии за съобщения. С някои бързи Googling можете да намерите допълнителни ресурси за настройка на модалите и диалоговите кутии за вашите случаи на използване.

Успех навън и щастливо кодиране!

ресурси

Обмен на стекове: Модали, изскачащи прозорци, Поповъри и Лайтбокси

w3schools: Как да - CSS / JS Modal

Sabe: Как да създадете модално изскачащо поле с CSS и JavaScript