CSS and Pop-up Forms

With "Ajax"-style unobtrusive server communication there are many opportunities to take information from users with less disruption to the continuity of their interaction with the Web site. In may cases the use of XMLHttpRequest and processing the server response do not have to be complex, and the CSS for the user interface does not have to be complex either, but it can be be rather specialized and unfamiliar to designers. Let's take a look at the CSS for a simple guestbook implemented as a pop-up form. The user triggers an event that pops up the form, which will submit to the server in the background, without taking the user to a new page.

Register yourself.

Name:
Email:
Birthday:

When the user clicks on the link above, a small form pops up. When the user submits the form successfully, it disappears again, perhaps leaving behind a confirmation message. In this article, let's focus on CSS techniques that can help create this kind of form.

Almost any pop-up is built from an element with absolute positioning. The CSS for this does not have to be complex. Elements with absolute position are often defined inside an element with position: relative, but this is not the only way. In fact if an element has position:absolute but no explicit location (unspecified left, right, top, bottom), CSS will position it at the same point where would appear if it were part of the flow.

In our example, almost all the work is done just by defining the pop-up through a DIV with position: absolute, but in this case we have used one more small trick as well -- using position: relative inside the definition of the pop-up itself. By putting all the displayable content of the pop-up in an element with relative position, we move the location of the element a little bit down and to the right from where it would otherwise appear when visible. The structure of the HTML defining our pop-up is:

 <p>[ Link or other control to invoke pop-up ]
 <div style="position: absolute; display: none;">
  <form style="position: relative; left: 1em; top: 2px;">
   . . . pop-up content goes here . . .
  </form>
 </div>

This simple combination of HTML and CSS define the positioning of our pop-up form. Static content can also be conveniently popped up in this way. In this case you would probably use a second DIV in place of the FORM tag used here.