Create A Responsive Pop-up Login Box for WordPress

Following on from my last tutorial, How to make a WordPress AJAX login form, I’m going to show you how to make your own lightbox-style pop up login box for wordpress and touch on some funky CSS3 techniques.

1. Add To Our HTML

We need to add a few lines to our HTML <form> element from the last tutorial for the popup to work – An inner div to wrap the pop-up content and give us a nice translucent border around our pop-up, a wrapper to centre and group our login and registration button and a button to close our pop-up.  Although the pop-up will close if anywhere outside of it is clicked, some users don’t know this off-hand so I think is better to include a button to make it obvious.

Our div wrapper simply looks like this:

<div id="login-inner">

and is placed just inside our <form> element, encompassing all the content in the form.

Our button container looks like:

<div class="text-center">

and wraps the submit button, register button and lost password link.  You could use another block element here like a <p> tag if you prefer but it’s not a paragraph of text – it’s a collection of buttons – so I’m using a div.

For the close button I’m using an <a> tag, but you could also use a <button> or <span> element too.  It looks like this:

<a class="close show-tooltip" title="close"><!--?<span class="hiddenSpellError" pre="" data-mce-bogus="1"-->php _e('Close', 'blueleaf'); ?></a>

This is placed at the end of the form markup as it is the least important in terms of actual content.  Don’t forget, that whenever you add some text straight into your WordPress template you should use the php _e() function so that the string registers for translation.  You can read more about e() in the WordPress codex.

 

So, In our themes footer.php, our form now looks like this:

<h3 class=”h1″>





 2. Adding a Pop-up button

We will also need to markup a button that the user will click to show the pop-up.  For the sake of simplicity in this tutorial I’m going to use an an element with a href of #login like this:

php _e('Log In To Your Account', 'blueleaf'); ?>" class="login_button"><!--?php _e('Log In', 'blueleaf'); ?-->

You can add this button wherever you want it on your site, header.php might be a good choice if you want to see the button on every page.

Again, you could use a different element here if you preferred.  The href attribute is not required for our pop up to work so <span>, <button> or <div> are all viable options here.  Just make sure you include a class of login_button.

 

3. Making the form pop-up

The fun part is coming soon but first we need o hide our form by default.  Add this line to your theme’s style.css:

form#login {
    display: none;
}

Now we can add some JavaScript to show the form when our button is clicked.  You can add this to your ajax-login-script.js file from the last tutorial, just before the line // Perform AJAX login on form submit:

// Show the login dialog box on click
var $body = $('body');  //Store the body in a variable so we don't have to keep selecting it which will improve performance
var $formLogin = $('form#login'); //Store the form too so we don't have to keep selecting it

$('.login_button').on('click', function(e){ //When the login button is clicked...
    e.preventDefault();//prevent the default action
    $formLogin.fadeIn(1000);//Fade the form in
    $('form#login a.close').on('click', function(e){
        e.preventDefault();
        $('form#login').fadeOut(1000);
    });
});

The comments explain what each line does.  Save that and go ahead and try it.  Your form should fade in when the login button is clicked.

“But it looks absolutely rubbish” I hear you say.  Lets add some style…

 

4. Do It With Style!

So far we haven’t added any styling to our form, it probably looks pretty drab.  First of all lets look at the CSS for positioning the pop-up in the centre of the screen.

form#login {
    display: none;
    z-index: 9999;
    position: fixed;
    height: auto;
    top: 50%;
    left: 50%;
    width: 50%;
    margin-left: -25%;
    margin-top: -12.5%;
}

Add this to your themes style.css and the form should appear in the centre of the screen when it pops up.

Now we have it positioned correctly we can add some style to the form and it’s contents.  You can use your own styles here to get it to match your site.  I used:

form#login {
	background: rgba(255, 255, 255, .1);
	border-top-right-radius: 3em;
	border-bottom-left-radius: 3em;
	box-shadow: 0 0 6px rgba(0, 0, 0, 0.2);
	padding: 0.5em;
	color: #fff;
	text-shadow: 1px 1px 0px #003647;
}

#login-inner {
	border-top-right-radius: 2.5em;
	border-bottom-left-radius: 2.5em;
	background-color: rgba(16, 128, 154, 0.75);
	border: 1px solid #0ea4c6;
	padding: 2em 1em 1em 1em;
}

#login-inner input {
	border-color: #003647;
}

#login-inner .h1 {
	color: #fff;
	margin-top: 0;
	font-size: 2.5em;
	text-align:center;
}

#login-inner a {
	color: #fff;
}

#login-inner .close {
	position:absolute;
	top: -0.75em;
	left: -0.5em;
	font-size: 1.5em;
}

5. Adding A Blurred Overlay

To make the pop-up stand out more I’m going to show you how you can blur the rest of the page using CSS and JavaScript.  However, the blurred CSS3 effect will only work in Webkit browsers at the time of writing.  If this is an issue for you you could use the same technique to simply add a coloured or opaque overlay instead of a blurred one.

Rather than pollute our HTML with unsemantic markup and an empty div, we’re going to add it on the fly using JavaScript. In your ajax-login-script.js file change the code we added earlier that calls the pop-up to:

// Show the login dialog box on click
var $body = $('body');
var $formLogin = $('form#login');
$('.login_button').on('click', function(e){
	$body.prepend('
');
	$body.children().not("form#login").addClass("blurred");
	$formLogin.fadeIn(1000);
	$('div.login_overlay, form#login a.close').on('click', function(e){
		e.preventDefault();
		$body.children().not("form#login").addClass("unblur");
		$('div.login_overlay').fadeOut(1000, function() {
			$(this).remove();
			$body.children().removeClass("blurred unblur");
		});
		$('form#login').fadeOut(1000);
	});
	e.preventDefault();
});

The fifth line $body.prepend('<div class="login_overlay"></div>'); adds our overlay element to the DOM, while the next line adds the CSS class “blurred” to all elements except our form.  Similarly, the class unblur is applied to all elements when the pop-up is closed on line 10.

Now all we have to do is add our CSS for the “blurred” and “unblur” classes, so in style.css add:

/* blur effect */
.blurred {
	-webkit-filter: blur(20px);
	-moz-filter: blur(15px);
	-o-filter: blur(15px);
	-ms-filter: blur(15px);
	filter: blur(15px);
	filter:progid:DXImageTransform.Microsoft.Blur(PixelRadius='15');
	transition : all 1s ease-out;
}
.unblur {
	-webkit-filter: blur(0px);
	-moz-filter: blur(0px);
	-o-filter: blur(0px);
	-ms-filter: blur(0px);
	filter: blur(0px);
}

I’ve added vendor prefixes for non-webkit browsers in the CSS in the hope that the blur filter will be added to future versions of opera, Firefox and IE.  The transition property creates a CSS animation of the blur filter.

Conclusion

That about wraps it up! You should now have a pretty funky pop-up login form for your WordPress site. If you have any questions, feedback or suggestions please leave a comment. Happy coding.

10 Responses to “Create A Responsive Pop-up Login Box for WordPress”

  1. A

    Why to write such confusing “how to” with pieces of code? Doesn’t make a sense.

    Reply
    • Ralph

      Err, sorry you feel that way. I have provided this for free. What is confusing you? Perhaps I can help if you tell me where you’re stuck?

      Reply
  2. Dan

    Hi,

    A few errors to the formatting:

    The last box in section 1 and the box in section 2 are not displaying the code correctly

    In 3. you used an example id of #ajax-login in the previous article not #login

    In 5. there is a split in the code boxes so that the prepend code isn’t showing.

    Thanks for the example – nearly have it working.

    Reply
    • Ralph

      Hi Marybeth,

      I can certainly help you. Can you please open a ticket here and leave me you web site address so I can take a look? I’ll get back to you with a quote via email and we can go from there.

      Reply

Leave a Comment

  • (will not be published)

Markup: You can use these XHTML tags in your comment: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>