Modal

# <!-- Open the modal using ID.showModal() method -->
Button('open modal', onclick='my_modal_1.showModal()', cls='btn'),
Dialog(
    Div(
        H3('Hello!', cls='text-lg font-bold'),
        P('Press ESC key or click the button below to close', cls='py-4'),
        Div(
            Form(
                # <!-- if there is a button in form, it will close the modal -->
                Button('Close', cls='btn'),
                method='dialog'
            ),
            cls='modal-action'
        ),
        cls='modal-box'
    ),
    id='my_modal_1',
    cls='modal'
)

# <!-- Open the modal using ID.showModal() method -->
Button('open modal', onclick='my_modal_2.showModal()', cls='btn'),
Dialog(
    Div(
        H3('Hello!', cls='text-lg font-bold'),
        P('Press ESC key or click outside to close', cls='py-4'),
        cls='modal-box'
    ),
    Form(
        Button('close'),
        method='dialog',
        cls='modal-backdrop'
    ),
    id='my_modal_2',
    cls='modal'
)

# <!-- Open the modal using ID.showModal() method -->
Button('open modal', onclick='my_modal_3.showModal()', cls='btn'),
Dialog(
    Div(
        Form(
            Button('✕', cls='btn btn-sm btn-circle btn-ghost absolute right-2 top-2'),
            method='dialog'
        ),
        H3('Hello!', cls='text-lg font-bold'),
        P('Press ESC key or click on ✕ button to close', cls='py-4'),
        cls='modal-box'
    ),
    id='my_modal_3',
    cls='modal'
)

# <!-- Open the modal using ID.showModal() method -->
Button('open modal', onclick='my_modal_4.showModal()', cls='btn'),
Dialog(
    Div(
        H3('Hello!', cls='text-lg font-bold'),
        P('Click the button below to close', cls='py-4'),
        Div(
            Form(
                # <!-- If there is a button, it will close the modal -->
                Button('Close', cls='btn'),
                method='dialog'
            ),
            cls='modal-action'
        ),
        cls='modal-box w-11/12 max-w-5xl'
    ),
    id='my_modal_4',
    cls='modal'
)

# <!-- Open the modal using ID.showModal() method -->
Button('open modal', onclick='my_modal_5.showModal()', cls='btn'),
Dialog(
    Div(
        H3('Hello!', cls='text-lg font-bold'),
        P('Press ESC key or click the button below to close', cls='py-4'),
        Div(
            Form(
                # <!-- A button in form will close the modal -->
                Button('Close', cls='btn'),
                method='dialog'
            ),
            cls='modal-action'
        ),
        cls='modal-box'
    ),
    id='my_modal_5',
    cls='modal modal-bottom sm:modal-middle'
)

# <!-- The button to open modal -->
Label('open modal', fr='my_modal_6', cls='btn'),

# <!-- Put this part before </body> tag -->
Input(type='checkbox', id='my_modal_6', cls='modal-toggle'),
Div(
    Div(
        H3('Hello!', cls='text-lg font-bold'),
        P('This modal works with a hidden checkbox!', cls='py-4'),
        Div(
            Label('Close!', fr='my_modal_6', cls='btn'),
            cls='modal-action'
        ),
        cls='modal-box'
    ),
    role='dialog',
    cls='modal z-999'
)

# <!-- The button to open modal -->
Label('open modal', fr='my_modal_7', cls='btn'),
# <!-- Put this part before </body> tag -->
Input(type='checkbox', id='my_modal_7', cls='modal-toggle'),
Div(
    Div(
        H3('Hello!', cls='text-lg font-bold'),
        P('This modal works with a hidden checkbox!', cls='py-4'),
        cls='modal-box'
    ),
    Label('Close', fr='my_modal_7', cls='modal-backdrop'),
    role='dialog',
    cls='modal'
)

# <!-- The button to open modal -->
A('open modal', href='#my_modal_8', cls='btn'),
# <!-- Put this part before </body> tag -->
Div(
    Div(
        H3('Hello!', cls='text-lg font-bold'),
        P('This modal works with anchor links', cls='py-4'),
        Div(
            A('Yay!', href='#', cls='btn'),
            cls='modal-action'
        ),
        cls='modal-box'
    ),
    role='dialog',
    id='my_modal_8',
    cls='modal'
)