login just liwebsite below

Posted on 2013-09-24
Medium Priority
Last Modified: 2013-10-21
hi, looking at couple of the websites, i found this website's login design pretty good, can someone guide me how can i build that one.

i think better woul to make the login and signup through ajax/jquery, but its interface of opening a window and logiing/signup and forget password on same window is good

here is the link:

http://www.flipkart.com , just click the login and see that, how can i build that kinda interface

  • 2
  • 2
LVL 30

Expert Comment

by:Alexandre Simões
ID: 39520593
Hi mate...

I don't know exactly what's your problem, as a whole login process is quite extensive.
If it's only a layout matter then basic HTML knowledge and ajax (you can use jquery to make things easier) is needed.

If you inspect that website login popup html you'll see that there's nothing different than a normal login form. In fact, you'll find the same login <form> element with all the needed components for authentication. So placing this form within a popup is a matter of web design (namely CSS).

To make a popup you just need a <div> with absolute positioning.
If you want to make it easier for you just pick one of the thousands available on the web.
If you're already using jQueryUI use this one: jquery dialog and style it as you need (again only CSS).

Facebook and other kinds of syndication options must be already supported by your authentication system. As far as layout is concerned you only need to drop some images there :)

I might recommend you to, whenever you have this kind of layout questions, to dig in yourself and learn from others code. Use Firebug for instance and inspect the HTML... see how things are done and apply your own thinking.

What else specifically do you need?
LVL 16

Accepted Solution

Gurpreet Singh Randhawa earned 0 total points
ID: 39520670
Thanks mate, i do need full code, i am just gonna have the layout, i am wek in css, html layout so i asked some guidance here, well from server prospective, i will do it all as i know you might have thought whole process of facebook, google login, [no this not the case, just the design part].

I hope i had cleared my question
LVL 30

Expert Comment

by:Alexandre Simões
ID: 39520888
Ok, so what you need is a fully working thing that is a bit too much for my available time.

Anyway, I can give you some hint links to get you started:

Good looking, well documented, time proven out of the box popup
Complete authentication system tutorial:

After this I advise you to:


Put it to work even without Ajax


Put it to work inside the popup but still no ajax


Add ajax to the mix
Also keep in mind that you might need to support legacy browsers and javascript disabled environments on which Ajax call won't work...
LVL 16

Author Closing Comment

by:Gurpreet Singh Randhawa
ID: 39587281
Solved it myself, used the CSS code to make it work,

Featured Post

Free Tool: Port Scanner

Check which ports are open to the outside world. Helps make sure that your firewall rules are working as intended.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

This article discusses how to implement server side field validation and display customized error messages to the client.
Q&A with Course Creator, Mark Lassoff, on the importance of HTML5 in the career of a modern-day developer.
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).

624 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question