Modal

Modal is used to show a dialog or a box when you click a button.

Method 1: HTML dialog element (recommended)

Open with JS document.getElementById('ID').showModal(). Close with ESC key or dialog button.

Basic modal opened with showModal().

Add a second form with modal-backdrop class.

Place a form with btn-circle button inside modal-box.

Use any w-* and max-w-* utility class on modal-box.

Bottom on SM, middle on MD using responsive prefixes.

Top, bottom, start, end positions.

Method 2: Checkbox (legacy)

A hidden checkbox controls the state. Labels toggle the checkbox to open/close.

Toggle using a hidden checkbox and label.

Use modal-backdrop label to close when clicked outside.

Method 3: Anchor links (legacy)

A link adds a URL hash. The modal is visible only when the URL contains that hash.

Open/close using anchor links.

use rsxui::components::{Modal, ModalBox, ModalAction, ModalPlacement};

use rsx_macros::rsx;

// Trigger button + dialog modal

let html = rsx! {

    <button onclick="document.getElementById('my_modal').showModal()">

        "open modal"

    </button>

    <Modal id="my_modal" placement=ModalPlacement::Middle>

        <ModalBox>

            <h3>"Hello!"</h3>

            <ModalAction>

                <form method="dialog">

                    <button class="btn">"Close"</button>

                </form>

            </ModalAction>

        </ModalBox>

    </Modal>

};