Basic Properties
This section covers the basic properties of generated popups.
ID
The id parameter sets the class name and localStorage
reference.
| Name | Type | Default Value |
|---|---|---|
id |
string |
popup |
The ID is useful to set if you plan on styling the popup with CSS outside of the library - more information in Custom Styles.
The popup ID is also used as a key for localStorage if you set the popup to only show once - more information in Show Once.
Having multiple popups with the same ID will cause issues, so if you're using multiple popups per page, make sure to give each popup a different ID.
Omitting the ID should not cause issues if none of the above are used, though it is still recommended to give your popups an ID, for example your popup title in kebab-case.
Title
The title parameter sets the title of the popup shown.
| Name | Type | Default Value |
|---|---|---|
title |
string |
Popup Title |
This parameter is the heading for your project/popup, so it should ideally be short but descriptive. Omitting the title is not recommended.
Content
The content parameter sets the main description of the popup shown.
| Name | Type | Default Value |
|---|---|---|
content |
string |
Popup Content |
This library comes with a lot of ways to customize the popup content without using CSS, which is expanded upon in Content Styling.
Width Multiplier
The widthMultiplier parameter sets the relative width of the popup.
| Name | Type | Default Value |
|---|---|---|
widthMultiplier |
float |
1 |
By default, a popup is 770px wide unless that covers more than 90% of the screen width, in which case the popup width is set to 90% of the screen width. The final width equates to the default width times the width multiplier, so a value of 0.8 would cover 616px or at maximum 72% of the screen width.
Height Multiplier
The heightMultiplier parameter sets the relative height of the popup.
| Name | Type | Default Value |
|---|---|---|
heightMultiplier |
float |
0.66 |
The height formula is identical to the height formula, except the default value already multiplies the calculated width by 0.66 so that the proportions are the same on all screen widths and heights. A height multiplier of 0.8 would therefore increase the height.
Note
The library currently does not support setting the width or height to a fixed value in order to maintain responsiveness. You could, however, override it using Overriding Styles.
Font Size Multiplier
The fontSizeMultiplier parameter sets the relative text size within the popup body.
| Name | Type | Default Value |
|---|---|---|
fontSizeMultiplier |
float |
1 |
Similarly to the popup width formula, the popup text size is calculated as the smaller value from 25px _ multiplier and 5.5% of window width _ multiplier.
Fade Time
The fadeTime parameter sets how long the popup fades in and out
when calling the show/hide methods or closing the popup.
| Name | Type | Default Value |
|---|---|---|
fadeTime |
duration |
0.3s |
Note there is currently only one value for both fading in and out for each popup.