Creating Pop-up Windows with Custom Data Attributes
Separating Behavior from Content, or Why onclick Is Bad Custom Data Attributes in Html5
Over the years, pop-up windows have gotten a bad reputation, and often rightly so. They’re often used to get you to look at an ad, to con- vince unsuspecting web surfers to install spyware or viruses, or, worse, to give away personal information that is then resold. It’s no wonder most browsers have some type of pop-up blocker available.Pop-ups aren’t all bad, though. W e b application developers often rely on pop-up windows to display online help, additional options, or other important user interface features. To make pop-ups less annoying, we need to implement them in an unobtrusive manner. When you look at AwesomeCo’s human resources page, you see several links that display policies in pop-up windows. Most of them look like this:
<a href='#' onclick= "window.open('holiday_pay.html',WinName,'width=300,height=300);" > Holiday pay </a>
Improve Accessibility Custom Data Attributes in Html5
<a href='holiday_pay.html' onclick= "window.open(this.href,WinName,'width=300,height=300);" > Holiday pay </a>
Abolish the onclick Custom Data Attributes in Html5
<a href="holiday_pay" class="popup">Holiday Pay</a>
Custom Data Attributes to the Rescue in Html5!
<a href= "help/holiday_pay.html" data-width= "600" data-height= "400" title= "Holiday Pay" class= "popup" > Holiday pay</a>
Now we just modify the click event we wrote to grab the options from the custom data attributes of the link and pass them to the window.open method.
Falling Back with Custom Data Attributes in Html5
We can do some interesting things with these new tags and attributes once they’re widely supported. We can identify and disable navigation and article footers very easily using print style sheets.
Custom data attributes give developers the ﬂexibility to embed all sorts of information in their markup.
We can also use them to display dates and times in a user’s time zone while still caching the page. Simply put the date on the HTML page as UTC, and convert it to the user’s local time on the client side. These attributes allow you to embed real, usable data in your pages, and you can expect to see more and more frameworks and libraries taking advantage of them. I’m sure you’ll ﬁnd lots of great uses for them in our own work with Custom data attributes in Html5