1 reply

dialog toaster

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>

KP-C

Kevin Powell - Community•3y ago•

1 reply

mtt-4242

dialog toaster

<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>

dialog toaster

Similar Threads

dialog toaster

Similar Threads

Similar Threads

Similar Threads