如何将登录界面与页眉页脚分开，如果没有它

Question

I want to know how to get different login interface for my web without change to the URL name. Example

<ul>
  <li><a href="http://domain.com/login/">Login</a></li>
</ul>

If user click on the Login I want to make it display on Ajax popup. Just show the login & password form. I'm using ColorBox. Example Outside HTML (Ajax)

If user type http://domain.com/login/ that page will include header, footer and etc.

Let me know what to put in my login.php to make it to be different.

Answer 1

You don't need to put any changes to your http://domain.com/login (potentially). You just have to attach the colorBox plugin to the link. It handles the popup and the e.preventDefault() call so people won't get the popup and the page. It's usually best to give the links an Id or class (like I have below).

<ul>
  <li><a class="loginlink" href="http://domain.com/login/">Login</a></li>
</ul>

$('a#loginlink').colorbox({href:"/yourLogin.html"});

Since you're using the Outside HTML example, you can do the above (replacing the filename with your actual HTML).

However, since it's not an incredibly huge piece of code to display a login form, you can include it in your page (but hidden) and pass this to the ColorBox plugin using the Inline Html example:

$('.loginlink').colorbox({
    inline: true,
    width: "50%",
    href: "#loginBox"
});

An example of the inline HTML working: http://jsfiddle.net/jonathon/MHhNX/