在对话框模式上方分层 toast 警报

Question

将DaisyUI modal（TailwindCSS UI库）与toast警报库结合使用时，我似乎找不到任何CSS允许我的全局toast警报出现在模式对话框上方（而只是通过浏览器的开发工具）。

我已经尝试过：

基于此
```
answer
```
以及关于
```
stacking context
```
的 MDN 文章，组件及其父级的 z-index 和 position 选项的各种变体。
还更改了我的大型应用程序中组件及其父级的顺序和位置（同时仍将我的警报机制保持在“全局”位置），但我在下面的最小示例中发现了同样的问题。
我还发现我可以使用 Chrome 的 DevTool 的“Layers”工具（以及 Edge 的3D View）进行调查，但它似乎没有给我任何明确的理由来说明哪些层位于其他层之上，除了说它“重叠”其他合成内容”。

我发现唯一有效的是，如果我通过在 DevTools Inspector 中使用拖放操作来更改实时网页中对话框的位置。无论我将对话框移动到哪里，这都会立即将所有 toast 警报移动到对话框上方，但我不知道如何使用它。

这是一个最小的可重现示例：

<!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/svelte-toast@0"></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>

Answer 1

HTML 似乎有一个相对较新的顶层概念，它“是跨越视口整个宽度和高度的特定层，位于 Web 文档中显示的所有其他层之上”，因此取代标准文档中尝试过的任何 z-index 和其他分层。它专门用于使用

<dialog>

的

HTMLDialogElement.showModal()

元素，以及 Popover 和 Fullscreen 元素。

让 toast 警报出现在模式上方的唯一方法是将其放置在这样的顶层中。最简单的方法是将它们也放置在模式使用的对话框中。

如果您希望即使在模式未打开时警报也全局可见，这可能看起来不太理想，但使用的 toast 库似乎拥有所有 toast 的单个存储，这意味着可以创建多个重叠的 toast 显示区域，你仍然只需要关闭它们一次。参见示例：

<!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/svelte-toast@0"></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 },
      }
    };
    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>

在对话框模式上方分层 toast 警报

问题描述投票：0回答：1

1个回答

最新问题

在对话框模式上方分层 toast 警报

问题描述 投票：0回答：1

1个回答

最新问题

问题描述投票：0回答：1