Наложение всплывающих оповещений над модальным диалоговым окном
При объединении модального окна DaisyUI (библиотеки пользовательского интерфейса TailwindCSS) с библиотекой всплывающих оповещений я не могу найти CSS, который позволил бы моим глобальным всплывающим оповещениям появляться над модальным диалогом (пока просто экспериментирую). через DevTools браузера).
Я пробовал:
- Различные варианты вариантов
z-indexиpositionдля компонентов и их родителей на основе этого ответа и статьи MDN о контексте стекирования. - Также я изменил порядок и размещение компонентов и их родителей в моем более крупном приложении (при этом сохраняя механизм оповещения в «глобальном» месте), но я обнаружил ту же проблему в минимальном примере ниже.
- Я также обнаружил, что могу провести исследование с помощью инструмента DevTool «Layers » Chrome (и 3D View Edge ), но он, похоже, не дал мне четкого объяснения того, какие слои находятся над другими, кроме как сказать, что « Перекрывает другой составной контент».
Единственное, что, как я обнаружил, работало, это если я изменил расположение диалогового окна на активной веб-странице с помощью перетаскивания в DevTools Inspector. Это немедленно перемещает все всплывающие оповещения над диалоговым окном, независимо от того, куда я перемещаю диалоговое окно, но я не знаю, как это использовать.
Вот минимальный воспроизводимый пример:
<!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/[email protected]/dist/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/[email protected]"></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>
Ответы 1
Кажется, в HTML появилась относительно недавняя концепция верхнего слоя, а именно:
определенный слой, который охватывает всю ширину и высоту области просмотра и находится поверх всех других слоев, отображаемых в веб-документе.
и поэтому заменяет любой z-индекс и другие слои, используемые в стандартном документе. Он используется специально для элементов <dialog> , которые используют HTMLDialogElement.showModal() , а также элементов Popover и Fullscreen.
Единственный способ заставить всплывающие оповещения появляться над модальным окном — это также поместить его в такой верхний слой. Проще всего было бы разместить их в диалоговом окне, используемом модальным окном.
Это может показаться не идеальным, если вы хотите, чтобы ваши оповещения были глобально видны, даже если модальное окно не открыто, но используемая библиотека всплывающих уведомлений, похоже, имеет единое хранилище всех всплывающих уведомлений, а это означает, что можно создать несколько перекрывающихся областей отображения всплывающих уведомлений, и вам все равно нужно будет закрыть их только один раз. См. например:
<!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/[email protected]/dist/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/[email protected]"></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 dialog = document.getElementById("my_modal_1");
const toastProps = {
options: {
reversed: true,
intro: { y: 192 },
}
};
/*
Attach to 2 different areas: one for global alerts and the
other for alerts that happen while the dialog is showing.
*/
const toastApp = new SvelteToast({
target: document.body,
props: toastProps
});
const toastDialog = new SvelteToast({
target: dialog,
props: toastProps
});
</script>
<style>
/* Style to put alerts in bottom middle. */
:root {
--toastContainerTop: auto;
--toastContainerRight: auto;
--toastContainerBottom: 1rem;
--toastContainerLeft: calc(50vw - 8rem);
}
</style>
</body>
</html>