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.
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:
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;
}
I just wanted to say thanks for your post. It helped me on a work project today.
Thanks for this helpful hint
Hi, maybe this can solve my project! Thank you so much. Do you can put a link with complete sample for download?
Thanx again
Hi,
Many thanks for your post, it's really good and benefit me to implement one of my project.
How do I get it to post to a php file?
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.
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.
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.
just made my day!
visit http://www.linkbucket.co.uk for free genuine copy of windows 7 ultimate. they got new site.
Hi Cris,
Can you tell me where's the link to download the complete source code for this article?
Thank You.
Chi
view source!
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");
}
)
}
);
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
<< Home