I want to share a little trick Jeff and I have employed for a new
client in this world of banned popups. A popup used to mean a
dialog for the user to present important information without them
navigating off a specific page and allow them to return to what they
were doing. Without this useful tool the user experience gets
broken up so with my javascript magic and Jeff's CSS skills we put
together this code snippet.
There
is an example on this page of the technique so you can see if you even
like the approach. The search box used to take up valuable screen
space so I removed it and used this technique to move it to a link
under the recent posts section as "Search Archives". Click the
link and you see a yellow popup form.
Assuming you thought the search box looked good I'll procede
with the tutorial. First you need to create a div for the
information you would ordinarily show in a popup:
<div id="whyWeAsk" class="popperHid">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus
suscipit mauris ut nunc. Phasellus volutpat quam a nisl. Etiam ante.
Nunc odio lacus, fringilla nec, lacinia sit amet, cursus sed, lectus.
Cras urna felis, gravida egestas, convallis vel, viverra nec, diam.
Morbi consequat, tellus nec consectetuer rutrum, lectus diam pulvinar
metus, sit amet sodales pede nisl ut nulla. Cras pretium lectus vitae
mauris. Morbi lorem. Mauris pretium placerat tellus. Proin in metus.
Pellentesque nec orci. Nunc velit mi, pharetra eget, suscipit non,
suscipit id, sem. Nunc sit amet nulla a dolor pharetra hendrerit. Class
aptent taciti sociosqu ad litora torquent.
<div id="closebutton"><input type="button" value="close this message" onClick="showWhy();"></div>
</div>
Without
any other modifications this should display
inline wherever you placed it on your page. Next we want to style
the content to look pretty and also to hide onload so we add two styles
for the "popper" itself and then style the buttons too. Either
add the following styles to your site.css file or use the in page style
tag:
<style>
.popperHid {
display:none;
}
.popperShow {
position: absolute;
z-index: 99;
padding: 10px;
border: 1px solid #600;
width: 385px;
left: 46%;
top: 360px;
margin: 0 0 0 -200px;
background: #ffc;
display:block;
font-size: 90%;
}
.popperShow #closebutton {
display: block;
text-align: center;
clear: both;
margin: .5em 0 0 0;
}
.popperShow #closebutton input {
font-size: 70%;
}
</style>
Refresh
your page and the popper becomes invisible since we have set the
display property to "none". The alternate style we defined uses
"display:block" and there is some other wizardry to position the popper
in the middle of your page regardless of browser width.
Finally
we add the following JavaScript function we mentioned in the initial
popper div block and an href tag which, when clicked will call the
toggling JavaScript function.
<script language="JavaScript">
function showWhy() {
document.getElementById("whyWeAsk").className ==
'popperHid' ? document.getElementById("whyWeAsk").className =
'popperShow' : document.getElementById("whyWeAsk").className =
'popperHid';
return false;
}
</script>
<a href='' onclick='return showWhy();'>(Why we ask)</a>
Put
it all together and you end up with a handy tool to give a user context
sensitive help on the page without navigating away from their current
page.
