Web Dev Notes

Blog about web development by Robert Dawson

CSS and jQuery tricks!

So, this morning, I ran across two unrelated web-dev problems, Q1) how to prevent that annoying blue highlight box from appearing when clicking on image map areas and Q2) how to close a modal window (i.e., hide a div) with the Escape key, since the latter feels like a common interaction pattern online today.

Q1: How do you prevent  that annoying blue highlight box from appearing when clicking on image map areas?

A1: Do this: 

area {
outline: none;
}

Q2: How do you close a modal window (i.e., hide a div) with the Escape key, since the latter feels like a common interaction pattern online today?

A2: Do this: 

$(document).on('keydown', function(e)
{
if (e.keyCode === 27) // ESC
{
$('.modal_window').hide();
}
});