The modal component
Defines the content of a modal box. Useful for displaying additional information or help.
Introduced in SQLPage v0.36.0.
Top-level parameters
| 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. |
Row-level parameters
| 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). |
Example 1
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' as title,
'my_modal' as modal;Result
Example 2
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' as title,
'my_embed_form_modal' as modal;Result
Example 3
Example of modal chart content
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
'button' as component;
select
'Open' as title,
'my_embed_chart_modal' as modal;Result
Example 4
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
'button' as component;
select
'Open' as title,
'my_embed_video_modal' as modal;