<\/p>\n<\/p>\n
Earlier this week I talked a bit about message boxes<\/a> \u2013 how to style them and position them on your page to get them noticed. But a message that pops up every single time your website is loaded could get annoying. It\u2019d be useful to give your users the ability to close those messages. For that, we\u2019ll turn to our friend JavaScript.<\/p>\n We\u2019ll start by building our message box in XHTML. Mine looks like this:<\/p>\n I\u2019ve made a div with both an ID and a class. This will come in handy later when we need to reference our object in our JavaScript. Inside, I put an anchor tag with a class of \u201cclose.\u201d This will become my close button later. And then I simply added a paragraph to hold my message.<\/p>\n Next up, we\u2019ll want to style that message box. You can make it look pretty much however you want, and Woork has a nice article on styling message boxes,<\/a> if you\u2019re interested in discovering alternative styles. For my message box, I wrote this:<\/p>\n Three rules are at play here. First, I\u2019m styling the message box itself, using the class I gave it. I\u2019m absolutely positioning the element and giving it a width. I\u2019m also giving it a red background, bolding the text inside and turning it white, and applying a border. Then I\u2019m applying a bit of styling to the paragraph inside to push it away from the side of the box. <\/p>\n Why didn\u2019t I apply that padding to the message box itself? Because of the \u201cclose\u201d link. I wanted to be able to float it to the right of the box and give it some styles to make it look more like a \u201cclose\u201d button. After all of that CSS, this is what I have:<\/p>\n But so far, we just have a message box. That close button doesn\u2019t do much of anything. For the rest, we\u2019ll turn to JavaScript. All we need is a little function like this:<\/p>\n This function takes a single argument (toClose) which tells it the ID of the element we want to make disappear. We supply argument when we call the JavaScript. In this case, because we want it to happen when someone clicks our close box, we\u2019d add it to our XHTML like this:<\/p>\n We\u2019ve added the \u201conclick\u201d attribute to our “close” link tomake it fire a bit of JavaScript when the element is clicked. We\u2019re telling it to call our closeBox function that we just wrote, and we’re giving it the ID of the message box we want to close. The \u201creturn false\u201d part basically tells it to stop (that is, not to actually go to our specified href afterwards). <\/p>\n That\u2019s all we need to create a message box that closes! However, if your users close the box and then refresh the page, the message box comes right back. What if we want it to close permanently? For that, we\u2019ll need some more fancy JavaScript, because we\u2019ll need to make use of cookies.<\/p>\n The cookie will act as a check that we can refer back to. When the user closes the message box, we\u2019ll set a cookie. Then, when they come back to the page, we\u2019ll check to see if the cookie is set. If there\u2019s no cookie, we\u2019ll show them the message. If there is<\/em> a cookie, we\u2019ll keep the message box hidden.<\/p>\n First, we\u2019ll make a small change to our CSS:<\/p>\n All we\u2019re doing is adding a \u201cdisplay: none\u201d to the top of the element. By default, we don\u2019t want our message box to show up. Instead, we\u2019ll use JavaScript to display it if we want to see it. Why? It\u2019s a usability thing: this way, if a user doesn\u2019t have JavaScript enabled, they don\u2019t see the message box. That may seem like a bad thing, but consider the alternative: if we didn\u2019t set this rule, then anyone without JavaScript couldn\u2019t get rid of<\/strong> your message box. And depending on its placement, that could be a big usability problem.<\/p>\n So now we need two extra functions in our JavaScript: one to set the cookie when we close the box, and another to check to see if the cookie exists when the user comes back. Our JavaScript now looks like this:<\/p>\n First off, we modified our closeBox() function to make a call to the setCookie() function after it\u2019s hidden the message box. <\/p>\n Next comes the setCookie() function. It takes three arguments: the name of the cookie, the value to be set, and how long the cookie should last before it expires (in days). We could have hard-coded some of this stuff to save time and space, but this way you can reuse this same function to set cookies all over your site \u2013 not just for this purpose. <\/p>\n Also, note that we\u2019re using the toClose variable for our cookie name in setCookie()… which you might also remember is the ID of the message box itself. This is a useful trick, because this means you could theoretically have multiple message boxes with different IDs (all with the same .msgbox class) on your page, and you could open and close them separately, because each of their states would be set in a unique cookie. <\/p>\n Next comes the loadMsg() function. It takes one argument: msgClass. This variable represents the class you\u2019ve set on all your message boxes. Our loadMsg() function cycles through all the <div> tags on your website and checks to see if they have the \u201cmsgClass\u201d class set (whatever that happens to be… in my document, that was \u201cmsgbox\u201d). If it finds such a div, it checks to see if it can find a cookie with a name that matches the ID set on that div \u2013 in our example it would be looking for \u201cmessage-1.\u201d If it doesn\u2019t<\/strong> find a match (meaning the user hasn\u2019t closed the box), then it sets that div to \u201cdisplay: block,\u201d meaning it will show up normally. Otherwise, the message box stays hidden.<\/p>\n Now, all we need to do is ensure the loadMsg() function runs when the page first loads. To do that, I just modified my body tag like so:<\/p>\n The \u201conload\u201d attribute fires when the page has finished loading, and it will call the loadMsg() function for us, displaying our message boxes as needed. And that\u2019s all there is to it! You can see a functioning example here.<\/a><\/p>\n Now, I did want to mention a couple of things before you try this on your own:<\/p>\n But enough from me… I want to hear what you<\/em> have to say about this technique. Leave me a comment!<\/p>\n<div id="message-1" class="msgbox">\n\t<a href="#" id="close" title="Close This">X<\/a>\n\t<p>My uber-important message goes here!<\/p>\n<\/div><\/pre>\n
.msgbox {\n\tposition: absolute;\n\ttop: 15px;\n\tright: 20px;\n\twidth: 20em;\n\tbackground-color: #b00;\n\tborder: 1px solid #333;\n\tcolor: #fff;\n\tfont-weight: bold; }\n.msgbox p {\n\tmargin: 0;\n\tpadding: 5px 10px; }\n.msgbox a.close {\n\tfloat: right;\n\ttext-decoration: none;\n\tfont-weight: bold;\n\tcolor: #333;\n\tbackground-color: #fff;\n\tborder-left: 1px solid #333;\n\tborder-bottom: 1px solid #333;\n\tpadding: 0 4px;\n\tmargin-left: 5px; }<\/pre>\n
<\/p>\nfunction closeBox(toClose) {\n\tdocument.getElementById(toClose).style.display = \"none\";\n}<\/pre>\n<a href="#" class="close" \nonclick="closeBox('message-1'); return false;" \ntitle="Close This">X<\/a><\/pre>\n.msgbox {\n\tdisplay: none; \/* Start out hidden. *\/\n\tposition: absolute;\n\ttop: 15px;\n\tright: 20px;\n\twidth: 20em;\n\tbackground-color: #b00;\n\tborder: 1px solid #333;\n\tcolor: #fff;\n\tfont-weight: bold; }<\/pre>\nfunction closeBox(toClose) {\n\tdocument.getElementById(toClose).style.display = \"none\";\n\tsetCookie(toClose, \"closed\", 365);\n}\nfunction setCookie(cName, value, expiredays) {\n\tvar expDate = new Date();\n\texpDate.setDate(expDate.getDate()+expiredays);\n\tdocument.cookie=cName + \"=\" + escape(value) + \n\t\";expires=\" + expDate.toGMTString();\n}\nfunction loadMsg(msgClass) {\n\tmsg = document.getElementsByTagName(\"div\");\n\tfor (i=0; i<msg.length; i++) {\n\t\tif(msg[i].className == msgClass) {\n\t\t\tif(document.cookie.indexOf(msg[i].id) == -1) {\n\t\t\t\tmsg[i].style.display = \"block\";\n\t\t\t}\n\t\t}\n\t}\n}<\/pre>\n<body onload="loadMsg('msgbox');"><\/pre>\n\n