Toasts
showToast(
"Lorem ipsum dolor sit amet consectetur adipisicing elit.
Veritatis accusantium possimus, numquam soluta odit quos iste,
veniam quo cumque itaque vel! Autem soluta in sit voluptates ullam quos hic voluptatem!",
"success"
);
showToast("You clicked on Link 2", "verified", 2);
showToast("You clicked on Link 3", "dark", 12);
showToast("You clicked on Link 4", "error");
showToast("You clicked on Link 5", "");
Popups
Example popup for Form Popup
initiate_popup({'target': '#form-popup', 'overlay_color':'rgba(0,0,0,0.65)', 'popup_type': 'form-popup', 'popup_max_height': '500px'});
Popup Settings
Deleted Tasks
Archived Tasks
Duplicate Tasks
Example popup for Alert Popup
initiate_popup({'target': '#alert-popup', 'overlay_color': 'rgba(0,0,0,0.65)', 'popup_type': 'alert-popup'});
Alert!
Lorem ipsum dolor sit amet, consectetur
adipisicing elit. Ab aliquam beatae blanditiis
culpa, debitis deserunt harum incidunt nemo quae
quaerat quasi quibusdam quidem, reiciendis,
sapiente tempore velit voluptatum. Ipsa,
repellat!
Example popup for Scroll Popup
initiate_popup({'target': '#scroll-popup', 'overlay_color': 'rgba(0,0,0,0.65)'});
Scroll!
| Column 1 | Column 2 | Column 3 |
|---|---|---|
| Row 1, Cell 1 | Row 1, Cell 2 | Row 1, Cell 3 |
| Row 2, Cell 1 | Row 2, Cell 2 | Row 2, Cell 3 |
| Row 3, Cell 1 | Row 3, Cell 2 | Row 3, Cell 3 |
Example popup for plan Popup
initiate_popup({'target': '#plan-popup', 'overlay_color': 'rgba(0,0,0,0.65)'});initiateSplideElements()
Plans!
Choose your membership
Column carousel
Example popup for slidein Popup
initiate_popup({'target': '#slidein-popup', 'popup_type': 'slidein-popup'});
Slide In!
Lorem ipsum dolor, sit amet consectetur
adipisicing elit. Quod assumenda nulla quis
fugit mollitia esse architecto, omnis in,
minima nihil magnam sequi asperiores,
possimus beatae voluptates? Iusto,
distinctio placeat dolore iste, atque
temporibus iure labore deleniti ad, corporis
eveniet sunt magnam neque quod ab
necessitatibus. Ipsam animi corporis vel
ducimus expedita tempora nemo eius
consectetur assumenda praesentium excepturi,
vitae delectus, autem tenetur blanditiis
asperiores veniam possimus magni suscipit,
debitis laborum nulla quos id labore!
Molestias culpa neque voluptate vero maxime
rerum quibusdam dicta omnis. Quas, maiores
iste! Rerum fuga vitae ex aut reiciendis
magnam architecto. Error dolor alias atque.
In suscipit laudantium expedita beatae dicta
consequuntur laboriosam eius pariatur
tenetur! Eos maxime labore laudantium
provident unde est, vel minima quisquam
tempore alias rerum aliquid numquam quos
molestias nihil pariatur cupiditate
accusamus! Dolores, nobis magnam.
Dignissimos, quaerat, consequatur numquam
recusandae tempore ad a quo ipsam totam,
placeat sit voluptatem sint temporibus. Hic
enim asperiores repellat iste temporibus
rem. Ullam perferendis sequi ex porro,
dolore optio fugiat deleniti saepe iure
minima, adipisci quidem autem eum veniam
enim, quas hic quam fuga veritatis mollitia
totam eos cupiditate? Obcaecati, aliquam!
Provident quod obcaecati libero ipsam,
nesciunt dolores? Ea architecto doloribus
aut omnis nihil laudantium illo impedit?
Maxime ad quia impedit fugiat iusto magnam
nobis, neque deleniti sint fuga quos quam,
maiores veritatis culpa minima itaque dolore
necessitatibus sed ex. Eum eos consectetur
nostrum commodi et libero doloribus
dignissimos nemo possimus, totam nulla
molestias iusto id minima ab laboriosam
quaerat modi natus quia facere aut alias
quos nam perspiciatis? Atque, magnam
dignissimos odio mollitia dolore laboriosam?
Aperiam maiores labore consectetur
recusandae, rem quod, alias nemo eligendi,
nobis aspernatur totam. Optio quia
repudiandae delectus ut suscipit laborum,
laboriosam ipsam doloremque quod natus,
doloribus, at sed commodi enim aperiam vero
itaque vel voluptatem corrupti! Commodi,
corrupti iusto!
Example popup for Force-Slidein Popup
initiate_popup({'target': '#force-slidein-popup', 'popup_type': 'force-slidein-popup'});
Example popup for Prevent Close Popup
initiate_popup({'target': '#prevent-close-popup', 'prevent_close': true});
Prevent close!
Lorem ipsum dolor sit amet, consectetur
adipisicing elit. Ab aliquam beatae blanditiis
culpa, debitis deserunt harum incidunt nemo quae
quaerat quasi quibusdam quidem, reiciendis,
sapiente tempore velit voluptatum. Ipsa,
repellat!
Example popup for toggle full width popup
initiate_popup({'target': '#toggle-width-popup', 'popup_full_width_mode': true});
Toggle width
Lorem ipsum dolor sit amet, consectetur adipisicing elit. At, minima!
Example popup for Narrow Mobile Popup
initiate_popup({'target': '#narrow-mobile-popup', 'popup_type': 'narrow-mobile-popup'});
Hello World
Example popup for cookie popup
initiate_popup({'target': '#cookie-popup', 'popup_type': 'cookie-popup', 'cookie_name': 'example_cookie', 'cookie_expiration': 'Fri, 31 Dec 9999 23:59:59 GMT', 'prevent_close': false});
Age Confirmation
Example popup for timer Popup
initiate_popup({'target': '#timer-popup','popup_time_delay': 2});
Hello World
Example popup for scroll trigger popup
initiate_popup({ 'target': '#scroll-trigger-popup', 'popup_scroll_trigger': true, 'popup_top_space': '500px'});
Popup Settings
Example popup for centered Popup (with simplebar)
onclick="initiate_popup({'target': '#centered-popup', 'popup_position': 'centered'});
Centered
Deleted Tasks
Archived Tasks
Duplicate Tasks
Example popup for exceed Popup
All the popups (that exceeds page height) are scrollable from outside by default
initiate_popup({'target': '#form-popup', 'overlay_color':'rgba(0,0,0,0.65)'});
Example popup for fade in popup
initiate_popup({'target': '#fadein-popup','popup_animation_type': 'animate-fade-in', 'popup_position': 'centered'});
Popup Settings
Deleted Tasks
Archived Tasks
Duplicate Tasks
Example popup for slide-in/slide-up popup
initiate_popup({'target': '#slide-in-up-popup','popup_animation_type': 'animate-slide-down', 'popup_position': 'centered'});
Popup Settings
Deleted Tasks
Archived Tasks
Duplicate Tasks
Example popup for bounce popup
initiate_popup({'target': '#bounce-popup','popup_animation_type': 'animate-bounce-in', 'popup_position': 'centered'});
Popup Settings
Deleted Tasks
Archived Tasks
Duplicate Tasks
Popup Initialization Arguments
| Argument | Description | Custom values | Default Values | Required |
|---|---|---|---|---|
| "target" | The ID of the popup. | Any | false | Yes |
| "overlay_color" | The background color of the popup overlay. | Any | "rgba(0,0,0,0.65)" | Optional |
| "popup_type" | Specifies the type or variation of the popup. |
|
"default" | Optional |
| "cookie_name" | The name of the cookie used in cookie popups. Only applicable when `popup_type` is 'cookie-popup'. | Any | "example_cookie" | Yes (For cookie) |
| "cookie_expiration" | The expiration duration for the cookie used in cookie popups. Only applicable when `popup_type` is 'cookie-popup'. | Any | "Fri, 31 Dec 9999 23:59:59 GMT" | Yes (For cookie) |
| "prevent_close" | Prevent popup from closing. |
|
false | Optional |
| "popup_time_delay" | Delay time to open the popup (Value should be in number) | Any | 0 | Optional |
| "popup_scroll_trigger" | Opens popup on scrolling down the page |
|
false | Optional |
| "popup_top_space" | Pixels or percentage from top to trigger popup. Value should be a string and the unit should be '%' or 'px'. Ex: '100px', '10%' | Any | "500px" | Yes (if popup scroll trigger is true) |
| "popup_animation_type" | Adds popup opening animation type. |
|
false | Optional |
| "popup_position" | Updates the popup position and height. If 'centered' selected, popup will be positioned 'center center' and will have limited height. Else it will be aligned from top and scrollable from outside. | 'centered' | false (scrollable) | Required for positioning |
| "popup_max_height" | The max-height of the popup container. |
|
'none'. '500px' if 'popup_position' is 'centered' |
Optional |
| "popup_over_popup" | Updatess styles for the popups that is placed over another popup | true | false | Required (if popup is placed on another popup) |
Custom values: If not 'Any', only specified values can be added as custom values.
Default values: These values will be added if no custom values are added.