Prevent user interaction with an unremovable layout
HoldOn.js is an useful plugin that allow you to create an unremovable (by the user) overlay with Javascript easily.
Prevent stupid behaviours from your users disallowing the use from your app with an overlay.
Github repository Read the documentation Get HoldOn.js (latest version)Installation
HoldOn is a jQuery plugin but the overlay will be handled internally by the plugin, so we will call HoldOn.js with a variable.
<head>
<meta charset="utf-8" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0"/>
<title>HoldOn.js Demo</title>
<!-- Load the css and js file in your document -->
<link href="path-to/HoldOn.min.css" rel="stylesheet">
<script src="path-to/HoldOn.min.js"></script>
</head>Then a global variable HoldOn will be accesible on your document and all the features that HoldOn have to offer will be available for its use.
Demos
HoldOn has a lot of available themes, just provide which theme you want as parameter in the object.
HoldOn.open({
theme:"sk-cube-grid"
});Open overlay read documentation
To open an overlay, use the HoldOn.open(options) method.
var options = {
theme:"sk-cube-grid",
message:'some cool message for your user here ! Or where the logo is ! Your skills are the only limit.
',
backgroundColor:"#1847B1",
textColor:"white"
};
HoldOn.open(options);Close overlay read documentation
To close the active overlay, use the HoldOn.close() method.
HoldOn.close();HoldOn.close function, this will close HoldOn overlay allowing again the user interaction.
Trending tops in Our Code World
Top 7 : Best free web development IDE for JavaScript, HTML and CSS
See the review from 7 of the best free IDE (and code editors) for web proyects development in Our Code World.
Read article
Top 5 : Best jQuery scheduler and events calendar for web applications
See the review from 5 of the best dynamics scheduler and events calendar for Web applications with Javascript and jQuery in Our Code World
Read article
Top 20: Best free bootstrap admin templates
See the collection from 20 of the most imponent Admin templates built in bootstrap for free in Our Code World.
Read article