Sunday, December 18, 2005

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.

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.

15 Comments:

At September 17, 2006 11:32 AM, Anonymous Anonymous said...

Hello,

I took a look at the source code and most of i understand, except one line of the code, can you explain to me its function:



// Personal add-ons:

function $(id) {
return document.getElementById(id);
}

function bootstrap() {
scripttag = $('script');
if (!scripttag)
return;
text = scripttag.childNodes[0].nodeValue;
eval(text);
}



// Standard:

function logView() {
var page = new Image();
var loc = document.getElementById("permalink").href;
var m = loc.match(/^http:\/\/.*?\/(.*)$/);
if (m) {
loc = m[1];
}
page.src = "http://www.perdues.com/blogometer/"+loc;
return page.src;
}

 
At October 06, 2006 6:31 AM, Anonymous Anonymous said...

I just wanted to say thanks for your post. It helped me on a work project today.

 
At May 13, 2008 6:17 AM, Blogger Atul said...

Thanks for this helpful hint

 
At October 17, 2008 11:43 AM, Blogger Rodrigo said...

Hi, maybe this can solve my project! Thank you so much. Do you can put a link with complete sample for download?
Thanx again

 
At January 15, 2009 3:07 PM, Anonymous Anonymous said...

Hi,

Many thanks for your post, it's really good and benefit me to implement one of my project.

 
At May 20, 2009 12:33 PM, Blogger anyone said...

How do I get it to post to a php file?

 
At May 26, 2009 9:28 PM, Blogger Cris said...

To post to a PHP or any other page,
use XMLHTTPRequest. You will need to
values of the fields to send them
to the server. Some toolkits such as
GWT have library functions to POST
a form using XMLHTTPRequest.

 
At July 01, 2009 1:36 PM, Blogger AJ said...

How can I make the pop-up bigger than it is. I have checked all css but do not see where i can change it.

 
At July 01, 2009 9:35 PM, Blogger Cris said...

This popup form is implemented with
a table, which "shrinks to fit" the HTML inside it. But you could specify
a specific size for your absolutely-
positioned element.

 
At July 15, 2009 11:37 PM, Anonymous Anonymous said...

just made my day!

 
At October 09, 2009 11:27 AM, Blogger soldiers33 said...

visit http://www.linkbucket.co.uk for free genuine copy of windows 7 ultimate. they got new site.

 
At March 23, 2010 12:46 AM, Blogger Ichwan said...

Hi Cris,
Can you tell me where's the link to download the complete source code for this article?

Thank You.
Chi

 
At March 30, 2010 12:32 PM, Anonymous Anonymous said...

view source!

 
At May 19, 2011 12:38 PM, Anonymous Anonymous said...

this version one works best for me as it is based on a mix of toggle and customised fadeIn & fadeOut animation:

$(document).ready(
function() {
$("span#form-login").hide();
$("a#menu-logreg-login").click(
function() {
$("span#form-login").fadeToggle("fast");
}
)
}
);

 
At July 29, 2011 6:29 PM, Blogger Brandon Champion said...

I love the internet. You post your short and easy to use code... 5 years later I need exactly this thing, I Google for it, figure it out, and put it into production in 1 day. Thanks.

 

Post a Comment

Links to this post:

Create a Link

<< Home