When trying to combine a DaisyUI modal (a TailwindCSS UI library) with a toast alert library from GitHub, I'm facing an issue where the global toast alerts are not appearing above the modal dialog. Despite experimenting with various CSS options using the browser's DevTools, I haven't been able to find a solution yet.
I've attempted:
- Adjusting the
z-indexandpositionproperties of the components and their parent elements based on recommendations from Stack Overflow and the MDN article on stacking context. - Rearranging the order and structure of the components in my application while ensuring the alert mechanism remains in a global location, but the issue persists even in a simplified example.
- Exploring Chrome's Layers tool and Edge's 3D View feature, but they didn't offer clear insights into why some layers appear above others beyond mentioning content overlapping.
The only workaround I found was manually moving the dialog's positioning using the DevTools Inspector, which resulted in the toast alerts consistently displaying above the dialog. However, I am uncertain how to implement this fix effectively.
Below is a minimal reproducible example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Layer test</title>
<link href="https://cdn.jsdelivr.net/npm/full.css" rel="stylesheet" type="text/css" />
<script src="https://cdn.tailwindcss.com"></script>
<!-- Load `toast` and `SvelteToast` into global scope -->
<script src="https://cdn.jsdelivr.net/npm/@zerodevx/dist/main.js"></script>
</head>
<body>
<button class="btn" onclick="my_modal_1.showModal()">open modal</button>
<dialog id="my_modal_1" class="modal">
<div class="modal-box">
<h3 class="font-bold text-lg">Hello!</h3>
<p class="py-4">Press ESC key or click the button below to close</p>
<button class="btn btn-primary" onclick="toast.push('Alert!', { initial: 0 })">Trigger alert!</button>
<div class="modal-action">
<form method="dialog">
<button class="btn">Close</button>
</form>
</div>
</div>
</dialog>
<script>
const toastApp = new SvelteToast({
target: document.body,
props: {
options: {
reversed: true,
intro: { y: 192 },
}
}
})
</script>
<style>
/* Style to put alerts in bottom middle. */
:root {
--toastContainerTop: auto;
--toastContainerRight: auto;
--toastContainerBottom: 1rem;
--toastContainerLeft: calc(50vw - 8rem);
}
</style>
</body>
</html>