TGViewer
mefody.dev mefody.dev @mefody_dev · 5.38K subscribers
Post #436 4.32K
Привязываем крестик к диалогу

Задача: нарисовать крестик в диалоге (попапе), который визуально выходит за границы диалога. Много видел разных реализаций в разные эпохи, дизайнеры рисуют такие макеты на моей памяти с тех времён, как появились модалки на position: fixed.

Важно, в этой задаче нужно учитывать семантику. Если вы не хотите разломать клавиатурную навигацию и доступность, крестик-кнопка должен быть внутри элемента-модалки.

Дарин Сеннефф предлагает современный вариант с Invoker Command и Anchor Positioning, где кода нужно сильно меньше, а результат вполне себе неплохой.

https://www.darins.page/articles/close-button-hang-dialog
Darin Senneff Getting a close button to hang off of a dialog - Darin Senneff Have you ever had to implement a modal dialog with a close button designed to hang off of the corner? While not a huge lift for most developers, there’s a few…
  • ❤ 32
  • 🥴 4
  • 👍 2
  • ❤‍🔥 1
More from @mefody_dev
  1. Sep 16, 2026Какие анимации более производительные: CSS или JS? Лучше пару раз увидеть, чем много откуд…
  2. Sep 14, 2026Единица измерения lh Если коротко, то 1lh = 1 line height. И это не размер шрифта, который…
  3. Sep 11, 2026<mermaid-element> Ещё одна полезная библиотека. Брамус собрал кастомный элемент, которому…
  4. Sep 10, 2026MicroLighter Дейв Руперт собрал маленькую библиотечку, которая делает подсветку кода. «Ещё…
  5. Sep 9, 2026Вам больше не нужен initial-scale Стопудово где-то у вас в вёрстке есть <meta name="viewpo…
  6. Sep 4, 2026deep tech night Чуть не забыл. Завтра же deep tech night будет. Там про ИИ и LLM, причём я…
Threads Profile ViewerView any public Threads profile without an account.Open ThreadLook →Writing with AI? Make it sound human.Metric37 rewrites AI drafts so they read naturally. Free AI detector, 1,500 words free.Try Metric37 →