In the following quick tip, I'm going to show you how to open a modal window on a web page after a short time deay. This might be useful to highlight a particular call to action, such as signing up for a newsletter or for getting likes on Facebook. Some sites also use this technique to display advertising.
But before continuing, take a second to ask yourself if this is something you really need to do. Whenever a site I'm browsing opens a modal without me having clicked on something, I almost always close it immediately and get annoyed that my attention was jerked away from whatever it was I was looking at. In my opinion such techniques can detract from the overall experience of a site and there are better ways to make visitors aware of your content.
A Basic Implementation
Still reading? Ok, I guess you're set on doing this, so let's get to it. For the impatient, there is a working demo at the end of the article.
For this quick tip I'll use the Colorbox plugin to display the modal. Colorbox relies on jQuery, so you'll have to add that to your page as well. Here's a template.
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Delayed modal demo</title>
<link rel="stylesheet" href="http://ift.tt/2eITRVz" />
</head>
<body>
<script src="http://ift.tt/1NCktat"></script>
<script src="http://ift.tt/2eIRzWr"></script>
<script>
<!-- Code here -->
</script>
</body>
</html>
Note that I'm using various CDNs to include the scripts here, but you could also install the dependencies using a package manager such as npm or bower.
Displaying the Modal
Normally, we would assign Colorbox to an HTML element and pass in any settings as key/value pairs inside an object:
$(selector).colorbox({
key:value,
key:value
});
However, we want to call colorbox directly (without assigning it to anything), so the syntax is slightly different:
$.colorbox({
key:value,
key:value
});
Colorbox has a bunch of options (many related to displaying images) which allow you to customize the modal. In the following example I am specifying its dimensions, giving it a class name (which allows me to style it using CSS) and passing it a string of HTML to display. You can find a full list of options on the page linked to above.
$.colorbox({
html:"<h2>Call For a Free Quote</h2>",
className: "cta",
width: 350,
height: 150
});
Then all that we need to do is use JavaScript's setTimeout function to call this code after the required period of time has elapsed. setTimeout() is a native JavaScript function, which calls a function or executes a code snippet after a specified delay in milliseconds. If you'd like to get up to speed with the ins and outs of setTimeout(), then you can read this SitePoint tutorial.
setTimeout(function(){
$.colorbox({
html:"<h2>Call For a Free Quote</h2>",
className: "cta",
width: 350,
height: 150
});
}, 10000);
The popup will now open after your visitor has been browsing the site for ten seconds.
Continue reading %Quick-Tip: Show Modal Popup after Time Delay%
by James Hibbard via SitePoint
No comments:
Post a Comment