First you need your login form. I put this in header.php.
<div id="inline-form" class="page-login hidden">
<?php wp_login_form( array ( 'redirect' => site_url( $_SERVER['REQUEST_URI'] ), 'value_remember' => true ) ); ?>
<a href="https://wordpress.stackexchange.com/questions/58742/<?php echo esc_url( wp_login_url() ); ?>?action=register">Register</a><br/>
<a href="<?php echo esc_url( wp_login_url() ); ?>?action=lostpassword">Lost your password</a>
</div>
Next your link to login or register.
<div class="login-logout">
<?php if ( ! is_user_logged_in() ) { ?>
<a href="#inline-form" class="fancy-zoom">Login </a> |
<a href="https://wordpress.stackexchange.com/questions/58742/<?php echo esc_url( wp_login_url() ); ?>?action=register">Register</a>
<?php } else {
$current_user = wp_get_current_user(); ?>
<?php echo $current_user->user_firstname. ' | ';?> <a href="<?php echo esc_url( admin_url( '/profile.php' ) ); ?>">Update Profile</a> | <a href = "<?php echo wp_logout_url( home_url() ); ?>" title = "Logout" > Log out</a >
<?php } ?>
</div>
Last step is your javascript. I’m using fancybox for this.
$(".fancy-zoom").fancybox({
fitToView : false,
width : 360,
height : 320,
autoSize : true,
closeClick : false,
openEffect : 'none',
closeEffect : 'none'
});