В начале моей третьей недели во Flatiron было поставлено несколько задач, в том числе мой первый проект: создание небольшого одностраничного приложения, взаимодействующего с общедоступным API. Написание технического сообщения в блоге также было в списке дел, и, потратив больше времени на мозговой штурм тем, чем я хотел бы признать, я понял, что то, за что мы с партнером взялись во время совместной работы над нашим проектом, с энтузиазмом прыгало вверх и вниз. , просят, чтобы о нем написали.

Итак, что же такое модальное? Скорее всего, вы столкнулись со своей справедливой долей, просматривая Интернет. Я знал, как это выглядит, и этого было достаточно, чтобы быстрый поиск в Google указал мне правильное направление. А... так эти штуки называются. Давайте просто уберем это с дороги прямо сейчас. Как ты это произносишь? Мо-дал? Мох-скучно? К слову, похоже, что техническое сообщество не пришло к единому мнению по этому поводу.

Модальное окно — это элемент на веб-странице, который находится перед остальным содержимым страницы. Обычно это окно, которое появляется, например, при нажатии на маленькое изображение, которое вы хотели бы увидеть в большем размере. По общему признанию, вы, вероятно, видели, как многие из них появлялись без предупреждения, запрашивая личную информацию для подписки на информационные бюллетени, рекламируя предложения с половинной скидкой или, возможно, даже сообщая вам, что вы выиграли бесплатный круиз. Какая удача!

Завершив галерею проекта, мы приступили к созданию загадочного модального окна. Некоторое время спустя (я, честно говоря, не знаю, сколько времени… Флэтайрон имеет свои собственные причудливые эффекты замедления и сжатия времени. Считайте себя предупрежденными), мы были в тупике и решили положить этому конец. На следующий день я провел дополнительные исследования и, таким образом, начал активно рассматривать код не только на JavaScript, но и на HTML и CSS. Звучит очевидно, не так ли? Ну, это было не для меня. Как только я начал понимать почти гомеостатические отношения между этими тремя, создание модального окна стало намного проще, чем я думал.

Как и почти все, чему я научился до сих пор в программировании, существует множество способов сделать… ну… все. Мой подход основывался на чрезвычайно полезном w3schools.com. Сначала я создал несколько элементов в файле HTML для размещения модального окна.

<div id = ”modal” class = ”modal”>
<span class = ”close”>&times;</span>
<img id = ”charImg” class = ”modal-content”>
<div id = ”caption”></div>
</div>

Помните тот ранее упомянутый поиск Google, который любезно сообщил мне, что такое модальное окно? Что ж, теперь я знаю не только то, что означает в HTML-стране, но и то, что точку с запятой лучше оставлять там ради блаженной совместимости.

Далее CSS. На данный момент он не должен выглядеть как Рембрандт, но давайте хотя бы скажем коду, что делать с информацией.

.modal {
display: none;
position: fixed;
z-index: 1;
}
.modal-content {
display: block;
}

Я пропустил большую часть моего кода CSS, потому что считаю, что это самое важное, что нужно отметить. Модальный элемент существует, но по умолчанию не настроен для отображения на странице. Z-индекс — это то, что перемещает элемент вперед на странице (помните, я упоминал что-то ранее о возможном виде модальных окон, когда они появлялись внезапно, практически бросая вам правый хук?). modal-content в моем конкретном случае было изображением, которое пользователь щелкнул в галерее, чтобы открыть модальное окно.

Вперед к JavaScript сейчас:

const createModal = (charObj) => {
const modalCont = document.querySelector(‘#modal’);
const modalImg = document.querySelector(‘#charImg’);
const close = document.querySelector(‘.close’);
modalCont.style.display = ‘block’;
modalImg.src = charObj.imageUrl;
close.addEventListener(‘click’, () => {
modalCont.style.display = ‘none’;
})
}

Опять же, я удалил часть моего фактического кода, сосредоточившись на наиболее важных частях. После того, как части HTML и CSS были готовы, использовать то, что нужно было сделать в JavaScript, было довольно просто. Мы взяли нужные элементы, изменили отображение с нет на блок, в результате чего появилось модальное окно с плащом-невидимкой, заполнили нужные информацию из API и убедился, что щелчок «X» в углу вернул дисплей в скрытый режим (о, этот подлый ).

Мне очень понравилось работать над этим проектом, и я думаю, что это большая причина, по которой я решил сосредоточиться на теме модальных окон. Это было намного больше, чем просто JavaScript, в том смысле, что мне нужно было думать о своей цели в более широком плане. Чтобы получить то, что я хотел, мне пришлось смотреть на программирование как на семью, а не как на личность, и это заставило меня ценить его еще больше.