The open function will show an overlay in the screen and will prevent the user interaction with the background.
| Property name | Description |
|---|---|
| theme (string) | The id of the selected theme (default will be sk-rect) |
| message (string) | The message that will be viewed by the user when the plugin is executed. HTML is allowed. |
| backgroundColor (string) | HEX Color (#1847B1) Defines the background color of the overlay |
| textColor (string) | HEX Color (#1847B1) Defines the text color of the overlay |
| content (string) | The HTML content of the overlay. This option only will be used if your theme is "custom" |
Available themes
- sk-rect
- sk-bounce
- sk-folding-cube
- sk-circle
- sk-dot
- sk-bounce
- sk-falding-circle
- sk-cube-grid
- custom (then the message setting will be available)
Select a theme with :
HoldOn.open({
theme:"sk-cube-grid"
});How to open a custom locker
To create a customized HoldOn use the "custom" theme in the options.
var options = {
theme:"custom",
// If theme == "custom" , the content option will be available to customize the logo
content:'<img style="width:80px;" src="https://www.google.de/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png" class="center-block">',
message:' some cool message for your user here ! Or where the logo is ! Your skills are the only limit.<br>; <input type="button" value="Close this Cover" onclick="HoldOn.close();">',
backgroundColor:"#1847B1",
textColor:"white"
};
HoldOn.open(options);If an element of your document doesn't get covered with the HoldOn.js overlay, then increase the z-index property in the css file of HoldOn or decrease the z-index of the problematic element.
