popover实现toast提示覆盖顶层对话框实例页面

回到相关文章 »

效果：

我是提示内容

代码：

CSS代码：

.toast {
    padding: .25rem .5rem;
}
::backdrop {
    background: #000a;
}

HTML代码：

<button onclick="dialog.showModal();">点击我显示模态对话框</button>

<dialog id="dialog">
    <blockquote>
        <button onclick="toast.showPopover();">显示toast提示</button>
        <button onclick="dialog.close();">关闭</button>
    </blockquote>
</dialog>

<div id="toast" class="toast" popover>我是提示内容</div>