## Modal **Category**: Actions Dialog/popup component for focused interactions ### Examples #### Anchor link modal ```python # A('open modal', href='#my_modal_8', cls='btn'), # 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' ) ``` #### Checkbox modal ```python # Label('open modal', fr='my_modal_6', cls='btn'), # 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' ) ``` #### Backdrop Checkbox Modal ```python # Label('open modal', fr='my_modal_7', cls='btn'), # 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' ) ``` #### Basic dialog modal ```python # 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( # Button('Close', cls='btn'), method='dialog' ), cls='modal-action' ), cls='modal-box' ), id='my_modal_1', cls='modal' ) ``` #### Dialog with outside click ```python # 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' ) ``` #### Dialog with corner close ```python # 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' ) ``` #### Custom width dialog ```python # 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( # Button('Close', cls='btn'), method='dialog' ), cls='modal-action' ), cls='modal-box w-11/12 max-w-5xl' ), id='my_modal_4', cls='modal' ) ``` #### Responsive dialog ```python # 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( # Button('Close', cls='btn'), method='dialog' ), cls='modal-action' ), cls='modal-box' ), id='my_modal_5', cls='modal modal-bottom sm:modal-middle' ) ```