Defines the a temporary popup box displayed on top of a webpage’s content. Useful for displaying additional information, help, or collect data from users.
Modals are closed by default, and can be opened by clicking on a button or link targeting their ID.
Introduced in SQLPage v0.36.0.
| name | required | type | description |
|---|---|---|---|
| id | REQUIRED | TEXT |
ID attribute added to the container in HTML. It can be used to target this item through css or for displaying this item. |
| title | REQUIRED | TEXT |
Description of the modal box. |
| allow | TEXT |
For embedded content, this attribute specifies the features or permissions that can be used. | |
| class | TEXT |
Class attribute added to the container in HTML. It can be used to apply custom styling to this item through css. | |
| close | TEXT |
The text to display in the Close button. | |
| embed | TEXT |
Embed remote content in an iframe. | |
| embed_mode | TEXT |
Use "iframe" to display embedded content within an iframe. | |
| height | INTEGER |
Height of the embedded content. | |
| large | BOOLEAN |
Indicates that the modal box has an increased width. | |
| sandbox | TEXT |
For embedded content, this attribute specifies the security restrictions on the loaded content. | |
| scrollable | BOOLEAN |
Create a scrollable modal that allows scroll the modal body. | |
| small | BOOLEAN |
Indicates that the modal box has a reduced width. | |
| style | TEXT |
Applies CSS styles to the embedded content. |
| name | required | type | description |
|---|---|---|---|
| contents | TEXT |
A paragraph of text to display, without any formatting, without having to make additional queries. | |
| contents_md | TEXT |
Rich text in the markdown format. Among others, this allows you to write bold text using **bold**, italics using *italics*, and links using [text](https://example.com). |
This example shows how to create a modal box that displays a paragraph of text. The modal window is opened with the help of a button.
select
'modal' as component,
'my_modal' as id,
'A modal box' as title,
'Close' as close;
select
'I''m a modal window, and I allow you to display additional information or help for the user.' as contents;
select
'button' as component;
select
'Open a simple modal' as title,
'#my_modal' as link;Example of modal form content
select
'modal' as component,
'my_embed_form_modal' as id,
'Embeded form content' as title,
TRUE as large,
'/examples/form.sql?_sqlpage_embed' as embed;
select
'button' as component;
select
'Open a modal with a form' as title,
'#my_embed_form_modal' as link;A popup modal that contains a chart generated by a separate SQL file. The modal is triggered by links inside a datagrid.
select
'modal' as component,
'my_embed_chart_modal' as id,
'Embeded chart content' as title,
'Close' as close,
'/examples/chart.sql?_sqlpage_embed' as embed;
select
'datagrid' as component;
select
'Chart' as title,
'blue' as color,
'Revenue' as description,
'#my_embed_chart_modal' as link;
select
'Form' as title,
'green' as color,
'Fill info' as description,
'#my_embed_form_modal' as link;Example of modal video content
select
'modal' as component,
'my_embed_video_modal' as id,
'Embeded video content' as title,
'Close' as close,
'https://www.youtube.com/embed/mXdgmSdaXkg' as embed,
'accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share' as allow,
'iframe' as embed_mode,
'350' as height;
select
'text' as component,
'Open a [modal with a video](#my_embed_video_modal)' as contents_md;Open a modal with a video