Display the unremovable layout in the screen.

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 :


How to open a custom locker

To create a customized HoldOn use the "custom" theme in the options.

var options = {
    // 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();">',


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.