How to make a jQuery popup to ask for logging in or creating profile

Question

I finally got a jQuery popup to work, and now trying to give the user the option to log in or create profile

So far I have something very simple like this:

var $dialog = $('<div>Please log-in or create a profile</div>')
    .dialog({
        autoOpen: false,
        title: 'Login Dialog'
    }); 

But what are some good and simple ways I can ask the person to log in? Should I just make a login form right in the div there? If so, in case the person needs to create a profile instead, how do I easily enable them to do that?

Also, should the login and create-profile code live elsewhere? If so, how do I reference it from this setup?

Thanks!!

Answer 1

Put the login form on your page as inline code. It's much easier to edit that way and switch it to be hidden when you are finished.

eg

<div id="mypopup" style="display: none;">
  <div id="loginform">
    Login form with layout with controls and buttons
    <span id="newprofile">Click here to create a new profile</span>
  </div>
  <div id="newprofileform" style="display: none;">
    New profile form with layout with controls and buttons
  </div>
</div>

And refer to it from your code using its ID.

var $dialog = $('#mypopup')
  .dialog({
    autoOpen: false,
    title: 'Login Dialog'
  }); 

$("#newprofile").click(function () {
  $("#loginform").hide();
  $("#newprofileform").show();
});