Member Avatar for rosanda

Hello friends,

I am trying to develope a new website, but I want it to be done in a special way.

I frequently come across websites that seems to be using a new technique. I would love to know how the technique is called.

Discription
The site works like this: whenever you click on an image or a template, the screen goes dark and transparent and the image pops in that grey area very clearly. Its also used by sites to display a contact form or something like that.

Does anyone know what I mean?

  • 2 Contributors
  • 3 Replies
  • 99 Views
  • 6 Hours Discussion Span
  • Latest Post Latest Post by ShawnCplus

Dani AI

Generated

described the pattern correctly in plain terms, and correctly pointed out the UX risk of overusing it. The UI pattern is a modal overlay used to highlight media or short forms; the practical concerns are accessibility, focus management, and mobile behavior rather than the visual trick itself.

  • Use semantic or ARIA roles. Prefer the native <dialog> when feasible (MDN: dialog element). When using a custom overlay, apply role="dialog" and aria-modal="true".
  • Trap and restore focus. Move focus into the dialog on open, keep Tab/Shift+Tab inside, and return focus to the opener on close. See the WAI-ARIA dialog pattern for exact behavior (WAI-ARIA Dialog (modal)).
  • Keyboard and screen-reader support. Provide Esc-to-close, a visible close control with an accessible label, and proper headings/labels for the dialog.
  • Prevent background interaction and scroll. Mark background content inert or aria-hidden while the dialog is open, and disable body scrolling (watch mobile/iOS edge cases).
  • Performance and visuals. Lazy-load large images, animate with transform/opacity (GPU-friendly), and avoid blocking the main thread.
  • Use sparingly. Reserve modals for focused tasks; prefer inline expansion for simple content (NN/g: modal vs nonmodal).

Minimal native example:

<button id="open">Open</button>

<dialog id="dlg" aria-labelledby="dlgTitle">
  <h2 id="dlgTitle">Photo</h2>
  <img src="photo.jpg" alt="Short description">
  <button id="close">Close</button>
</dialog>

<script>
const dlg = document.getElementById('dlg');
document.getElementById('open').addEventListener('click', ()=> dlg.showModal());
document.getElementById('close').addEventListener('click', ()=> dlg.close());
</script>

For production use, validate with keyboard-only and screen-reader testing and add a polyfill or a well-maintained library where browser support or extra features are needed.

Recommended Answers

All 3 Replies

Member Avatar for ShawnCplus

It's called a lighbox. Doing a google search for lightbox will pop up countless results though the best is probably this one

Member Avatar for rosanda

Thanx an lot mate... You've helped me immensely...

This technique is a brilliant idea.. the person who created it is a genius..

Member Avatar for ShawnCplus

There is much debate over modal design in web development so don't go hog wild and pop up a modal form for everything since it will quickly frustrate your users.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.