design a floating login <div> issue
can anyone please guide me to design a login div like ups.com. just go to www.ups.com and click on login button then a开发者_高级运维 floating login div appear. how to generate this type of div. please help me if possible. thanks
You will need to make a div with a CSS style position: absolute; z-index: 100. This will position the div on top of all content (z-index) and without moving it from it's position, set by using top, left, bottom, and right. These four numbers are in pixels and are relative to the HTML canvas.
To display the floating div, set it's display CSS to display: none. Then, using JavaScript, or jQuery, make it so that clicking the login link will show the popup div, lik this (jQuery):
HTML
<a href="" id="login_link">
<div id="login_form">
-- form contents --
</div>
CSS
#login_form
{
display: none;
position: absolute;
top: /* Whatever padding you need */;
bottom: /* Whatever padding you need */;
left: /* Whatever padding you need */;
right: /* Whatever padding you need */;
}
jQuery
$("#login_link").click(function() {
$("#login_form").show() // Can be .fadeIn() too
});
Hope this helps,
James
By setting position as fixed or absolute, and set top and i.e. left properties. Looking at ups.com they use something like this:
#loginform { position: absolute; left: 409px; top: 21px; width: 270px; }
On top of this they use a transparent gif for the arrow and then a div inside with the styling of grey background and border.
Edit:
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
header { background: black; color: white; padding: 2em; }
#login { position: absolute; top: 5em;
background: #eee; border: solid 1px #999;
width: 200px; height: 200px; }
</style>
</head>
<body>
<header>
<button>Login</button>
<form id="login"></form>
</header>
</body>
</html>
When it comes to hiding or showing the form I think JamWaffles post is good. jQuery is one of several ways to go, but probably one of the better. If not best. ;)
You could always check how they did it, seeing as how you know a working example.
Install firebug on Firefox (http://getfirebug.com/) or use Chrome's built-in debugger - in both cases right click the div and select "Inspect element".
You can learn the basic theory behind relative and absolute positioning at http://www.barelyfitz.com/screencast/html-training/css/positioning/ and check their code for details.
加载中,请稍侯......
精彩评论