mtt-4242 Posts - Answer Overflow

mtt-4242

Explore posts from servers

•Created by mtt-4242 on 2/16/2024 in #front-end

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>

2 replies

Gaming

Programming