Kevin Powell - Community•4mo ago

dialog toaster

Hi 👋 I'm was hoping to create a toaster that works with showModal dialog. The toaster is a popover element. It is outside the dialog and opened after the dialog element. Even if the last element of the top layer stack is visible, that doesn't seem to be the case for the ::backdrop. So the toaster is not interactive. Any idea/hack ?

<main>

        <button onClick="dialog.showModal()">test</button>
        <dialog id="dialog" style="margin-block:0;">

          <button popovertarget="my-popover" popovertargetaction="show"> Open Popover </button>
        </dialog>

        <div id="my-popover" popover="manual" style="margin-block:40px;">
            <p>I am a popover with more information.</p>
            <button popovertarget="my-popover" popovertargetaction="hide"> Hide Popover </button>
        </div>

</main>

<main>

        <button onClick="dialog.showModal()">test</button>
        <dialog id="dialog" style="margin-block:0;">

          <button popovertarget="my-popover" popovertargetaction="show"> Open Popover </button>
        </dialog>

        <div id="my-popover" popover="manual" style="margin-block:40px;">
            <p>I am a popover with more information.</p>
            <button popovertarget="my-popover" popovertargetaction="hide"> Hide Popover </button>
        </div>

</main>

1 Reply

EIO•4mo ago

Just curious; were you the one that asked this on Twitter?

Gaming

Programming

dialog toaster