AngularLynx

    Modal Dialog

    A modal that floats above the page, with a dimmed backdrop that closes it when tapped. It uses the <overlay> element directly.

    element-overlaysrc/app/app.ts

    What it shows

    • <overlay> — renders its content in a layer above the page. Use it instead of position: fixed, which Lynx places relative to the page root. See <overlay>.
    • The visible attribute — bound to the showModal signal, it shows and hides the overlay.
    • Backdrop dismiss — a full-size <view> inside the overlay closes the modal on (bindtap).
    • (catchtap) on the card — stops taps inside the modal from bubbling up to the backdrop. See Handling taps and events.
    • A translucent backdrop — bg-black/40 is a named color with an opacity modifier, which works on Lynx. See CSS on Lynx.