Как улучшить данный код?

Question

[Иван Симонов]

Здравствуйте
Попытался реализовать, как здесь (2 экран) https://www.gv.com/portfolio/
Код, который получился - Fiddle
Подскажите, как улучшить данный код

Comments

[Demian Smith]

Код особо не изучал, но при беглом просмотре глаза не кровоточат, что уже отличное начало.

Чисто визуально можно убрать outline у кнопки закрытия модала. И добавить cursor: pointer. Ну и раз уж решили делать такую кнопку, то лучше её сдвинуть немного влево-вниз чтоб она не прилипала к правому верхнему краю вплотную.

Еще попробуйте добавить модалу много-много текста и посмотреть что получится. Я бы ограничил область модала высотой экрана и добавил скролл для экстренных ситуаций. Испытывать вёрстку большим количеством текста - вообще полезная привычка фронтендера. Как говорится, гугл так всегда делает.

[Иван Симонов]

Demian Smith, Благодарю - получилось так

[Demian Smith]

ivan00007, красава!

Если остались силы, то можно попробовать сделать еще круче, если при скролле будет скроллится только текст, а заголовок и кнопка закрытия будут оставаться на том же месте.

[Иван Симонов]

Demian Smith,
Fiddle
Готово, но не учел, что заголовок, может быть больше, чем одна строка

[Иван Симонов]

:K Yaha, Я читал данную статью. Возник вопрос, получается данный код html, должен иметь одного родителя?

[Robur]

Можно хендлеры событий вынести из for - у вас сейчас для каждого элемента новые функции создаются

[Иван Симонов]

Robur, Спасибо. А можете пример показать, как вынести за цикл действие?

[Robur]

вот так:
https://jsfiddle.net/fj1uo7v5/
еще вам не нужна modalData - она ничего не делает в данном случае.
так же подсветку при наведении мыши лучше сделать через CSS, через :hover

[Иван Симонов]

Robur, Благодарю