FluxUi modal + lightbox

Level 58

Certainly! This is a common issue due to how the HTML <dialog> element works. By design, dialogs create a new stacking context, and most libraries append overlays and lightbox content directly to the <body>. As a result, the dialog (modal) will always appear above overlays that are outside it.

Let's clarify your two main issues:

When the lightbox's overlay is in body, it appears under the modal dialog.
When you force the lightbox overlay inside the dialog, it can't overlay the whole viewport.

Why This Happens

The <dialog> element is rendered above other DOM elements, because it uses a browser-level overlay and a new stacking context.
Overlays outside the dialog are "behind" it in the stacking order.
Overlays inside the dialog are clipped to its bounds.

Potential Solutions

1. Use a Custom Modal (Not `<dialog>`)

You're right: using a custom modal made with regular <div> layers is the most flexible. That way, everything is rendered in stacking order on the same plane and overlays/lightboxes can appear as expected.

2. Fix the Stacking Context (Not Reliable)

You could, in theory, try to force the body overlay above the dialog using z-index, but with <dialog> there are browser limitations. This is almost impossible due to how browsers implement <dialog>.

3. Make the Dialog Fullscreen Temporarily

If you must use <dialog>, when a thumbnail is clicked, try to dismiss/hide the dialog before opening the lightbox. Then, let the lightbox render on top. When closing the lightbox, re-open the dialog. But this results in a flicker and is not smooth.

4. Use a "Portal" Mechanism for Lightbox (Best for Frameworks)

If you're using Vue, React, or Alpine.js, you can "portal" the lightbox markup so it's rendered in body directly—bypassing the modal/FluxUi stacking entirely. But the browser-level modal will still float above, so this will only work if you hide/close your <dialog> modal when launching the lightbox.

Working Example (Custom Modal Suggestion)

The simplest and most robust solution is to not use <dialog> at all. Instead, create your own modal with a <div> and position it with CSS.

For example:

<!-- Modal wrapper -->
<div class="modal-overlay">
    <div class="modal-content">
        <!-- Image thumbnails -->
    </div>
</div>
<!-- Lightbox is appended to body as usual -->

With CSS:

.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.5);
    z-index: 1000;
}
.modal-content {
    position: relative;
    margin: 100px auto;
    width: 500px;
    background: white;
    z-index: 1001;
}

The lightbox overlay can be given a higher z-index (like 2000) and appended outside your modal, so it'll always appear above.

Summary

Using <dialog> and lightboxes together is problematic due to browser implementation and stacking contexts. Most people switch to custom modal implementations with <div>.
Portals don't solve the <dialog> issue unless you hide the dialog while the lightbox shows.
Best solution: Use a custom modal with <div>. That gives you full control over stacking order and overlays.
If you’re using FluxUi purely for its modal, consider rolling your own modal component instead.

Let me know if you want a more detailed code example of a custom modal or advice on a particular lightbox plugin.