dialog

普通弹框 .na-dialog。可以直接操作 dialog[open]，也可以调用 .show()/.close() 显隐

用户代理默认 position:absolute

dialog.na-dialog(open style={
    position: 'fixed',
    inset: 'unset',
    bottom: '2em',
    right: '2em',
    width: '260px',
})
    p.na-paragraph(data-size=4 style="margin-top:.5em") 追踪 Cookie
    p.na-paragraph 我们使用这些来分析网站流量
    form(method="dialog")
        button.na-button(style='place-self:end') 拒绝

在 dialog:not([popover]) form[method=dialog] 里 button 或 input[type=submit] 都能触发关闭

全局变量 --padding-dialog 可以设置弹框内边距

本章节无论对话框框，模态框，气泡框，都是原生dialog元素为基础实现的，故而css变量名都同为 --*-dialog

模态弹框 .na-dialog。务必调用 .showModal() 显示

相比于 .show() 打开的普通弹框，对话框拥有全屏遮罩（::backdrop），且默认会被 Esc 键关闭

用户代理默认 position:fixed

dialog.na-dialog
    p.na-paragraph 
        | Press
        kbd.na-kbd Esc
        | to close. 🤣👉📱

气泡弹框 .na-popover

[popover=auto] 默认点击外部自动关闭气泡，默认会被 Esc 键关闭

也可以调用 .showPopover()/.hidePopover()/.togglePopover() 显隐

.na-popover-wrapper(style={
    'anchor-name': '--popover-wrapper'
})
    button.na-button(popovertarget="pop") 連絡先
    dialog#pop.na-popover(popover="auto" style={
        'position-anchor': '--popover-wrapper',
        left: 'anchor(center)',
        top: 'calc(anchor(bottom) + 8px)',
        transform: 'translateX(-50%)',
    })
        form(method="dialog" style="width:96px")
            button.na-button(data-primary style={
                "--background-color-button": "var(--blue-8)",
                "--background-color-button:focus": "var(--blue-7)",
            })
                svg(
                    data-icon='logo/outline/facebook'
                    width=22
                    height=22
                )
            button.na-button(style="--color-button:var(--blue-6)")
                svg(
                    data-icon='logo/outline/twitter'
                    width=22
                    height=22
                )

案例使用实验性的 position-anchor 实现，需要自订定位宽高以及对齐

全局变量 --padding-dialog 可以设置弹框内边距（优先）

全局变量 --gap-dialog-form 可以设置弹框内边距和表单网格间距，.na-popover.sm 预设了更小的

下拉气泡框 .na-dropdown-wrapper > .na-dropdown 实际上就是预设了绝对定位至下方的 .na-popover

.na-dropdown-wrapper
    button.na-button(popovertarget="drop") 連絡先
    dialog#drop(popover="auto")
    .na-dropdown.sm(style="width:96px")
        button.na-button(data-primary style={
            "--background-color-button": "var(--blue-8)",
            "--background-color-button:focus": "var(--blue-7)",
        })
            svg(
                data-icon='logo/outline/facebook'
                width=22
                height=22
            )
        button.na-button(style="--color-button:var(--blue-6)")
            svg(
                data-icon='logo/outline/twitter'
                width=22
                height=22
            )

使用 dialog+.na-dropdown 丐版实现，其在非展开【:not(:popover-open)】的弹框后面会隐藏

由于 [popover=auto]+.na-dropdown 不属于弹框内，点击页面任意位置都会自动关闭，不够完美，而且只实现了往下一个方向。默认会被 Esc 键关闭

全局变量 --gap-dialog-form 可以设置弹框内边距和表单网格间距，.na-dropdown.sm 预设了更小的

dialog

## modal

## popover

## dropdown