I’m currently working on a new software and I am working on both an administration page and a home page for the software. I also made a login page. Currently the login page looks kind of strange because it basically only has a few elements and takes up almost the whole screen (except a header, a navigation bar and a footer). So the screen is much too big for the few elements I have in there. So I decided to move the login page to a floating login dialog which is much smaller and thus looks better. Here is a short tutorial how to build such a dialog with HTML, CSS and jQuery.

First, you need to understand what dialogs in this context are. Dialogs are usually implemented in such a way that you have an HTML element floating on top of the page. In order to have it not displayed in the page or below the page, you need to define a z-index which defines where the element is displayed on the Z axis. This is done in CSS with the following:

        .dialog-popup {
            display: none;
            left: 50%;
            position: fixed;
            top: 50%;
            z-index: 99999; 
        }

Here a short explanation about the different CSS properties set above:

• display: none => the dialog is not displayed when you open the page containing it but only when you click on some login link.
• left: 50% / top: 50% => we want to have the dialog centered on the screen. This defines that the top left corner of the dialog will be in the middle of the screen. This means we’ll have to add some negative left and top margins when we display the dialog in order to have the middle of the dialog centered (the exact offset of course depends on the height and width of the displayed dialog.
• position: fixed => this means that the position of the dialog doesn’t depend on the position of other elements but has a fixed position on the screen. Also note that the default value for position is static and with this set, the z-index will be ignored. So it’s important to set it to fixed.
• z-index: 99999 => All elements with a z-index smaller than 99999 will be displayed below the dialog. If elements have no z-index defined, they inherit the z-index of their parent and if none is defined for any element, they all have a z-index of 0.

To make it look nicer, we’ll also had the following to the CSS for .dialog_popup:

            background: none repeat scroll 0 0 #CCCCCC;
            border: 2px solid #222222;
            border-radius: 3px 3px 3px 3px;
            font-family: Verdana,Geneva,sans-serif;
            padding: 10px;

Note that you may want to add the corresponding browser specific properties for border-radius.

Now let’s first move to the HTML code before we get back to the CSS. We need a link which will display the dialog:

<a href="#" data-selector="#login-dialog" class="dialog-link">Login</a>

The data-selector attribute is a custom attribute which is used to indicate which div ID is to be opened in the dialog when the link is clicked.

Now we’ll define the div for the dialog itself:

<div id="login-dialog" class="dialog-popup">
	<form method="post" action="#">
		<fieldset>
		</fieldset>
		<button class="submit" type="button">Login</button>
	</form>
</div>

To actually open the dialog, we’ll use jQuery. First we’ll load jQuery from Google:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

Then we’ll define that the dialog with the id defined in the data-selector attribute will be made visible with a fade in effect and its margins will be adapted so that it’s properly centered:

    <script type="text/javascript">
        $(document).ready(function() {
            $('a.dialog-link').click(function() {
                var dialog_id = $(this).attr('data-selector');
                $(dialog_id).fadeIn(200);
                $(dialog_id).css({ 
                    'margin-top' : -($(dialog_id).height() + 4) / 2,
                    'margin-left' : -($(dialog_id).width() + 4) / 2
                });
                return false;
            });
        });
    </script>

To go from the top left corner to the middle of the dialog, we’re defining a negative top and left margin corresponding to half the height and width of the dialog. We also add 4 pixels to the height and width because of the 2 pixels border on all 4 sides of the dialog.

If you want the dialog to be displayed faster, you should reduce the 200 parameter in the fadeIn call. If it’s too fast for you, increase it.

Now we’ll want to add some content to our login dialog:

• A close button.
• A username field.
• A password field.
• A link for users who forgot their password.

For the close button, I’ll this nice little icon:

With these additions, the HTML code for the dialog looks like this:

<div id="login-dialog" class="dialog-popup">
	<a href="#" class="close"><img src="close.png" class="close-button" title="Close this dalog" alt="Close" /></a>
	<form method="post" action="#">
		<fieldset>
			<label for="username">
				<span>Username</span>
				<input type="text" id="username" name="username" placeholder="Username" value=""></input>
			</label>
			<label for="password">
				<span>Password</span>
				<input type="password" id="password" name="password" placeholder="Password" value=""></input>
			</label>
			</fieldset>
		<button class="submit" type="button">Login</button>
		<a href="#" id="forgot-password-link">Forgot your password? Click here.</a>
	</form>
</div>

We’ll need to style it a little bit. First place the close button on the top right corner:

.dialog-popup .close-button {
	float: right;
	margin: -26px -26px 0 0;
}

Then we’ll remove the border and padding from the fieldset:

.dialog-popup form fieldset {
	border: medium none;
	padding: 0;
}

Then we’ll make the labels and input elements look nicer:

.dialog-popup form fieldset label {
	display: block;
	font-size: 1.2em;
}

.dialog-popup form fieldset label span,
.dialog-popup form fieldset label input,
.dialog-popup form button,
.dialog-popup form a {
	display: block;
	margin-bottom: 10px;
}

.dialog-popup form fieldset label input {
	background: none repeat scroll 0 0 #EEEEEE;
	border-color: #FFFFFF #DDDDDD #DDDDDD #FFFFFF;
	border-radius: 3px 3px 3px 3px;
	border-style: solid;
	border-width: 1px;
	color: #000000;
	padding: 6px 6px 4px;
	width: 200px;
}

Style the submit button:

.dialog-popup form button.submit {
	border-color: #000000;
	border-radius: 3px 3px 3px 3px;
	border-width: 1px;
	cursor: pointer;
	margin-top: 10px;
	padding: 6px 6px 4px;
	width: 200px;
}

.dialog-popup form button.submit:hover {
	background-color: #E0E0E0;
}

And the link for those who forgot their password:

#forgot-password-link {
	color: #00AE00;
	font-size: 0.7em;
	text-align: center;
	text-decoration: none;
	width: 200px;
}

Now that everything looks nice, we’ll also add an overlay below the dialog, so that we can make the page under the dialog darker. This way it is clear to the user, that he/she has to focus on the dialog and not the page in the background anymore. So first we need to add a div for the overlay e.g. after the definition of the dialog:

<div id="dialog-overlay" title="Click here to close the dialog">

This overlay is also hidden when the page is first displayed (just like the dialog itself) and will be displayed when the link is clicked. The overlay should cover the whole page, be dark and semi-transparent.

Being hidden by default means:

display: none;

Below the dialog but over of the page:

z-index: 99998;

Covering the whole page:

position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
height: 100%;
width: 100%;
margin-left: auto;
margin-right: auto;

Being dark and semi-transparent:

background: #000;
opacity: 0.75;

This makes the page in the background still visible but not really readable. If it’s too dark for you, just reduce the opacity: 0 means transparent, 1 means opaque (i.e. the page is not visible anymore).

Now that we’ve defined the overlay below the dialog, we need to have it display at the same time as the dialog itself. This is done by adding the following line just above the similar line making the dialog appear:

$('#dialog-overlay').fadeIn(200);

And we want both to disappear when the close button is clicked. Actually we also want both to disappear when you click on the overlay (so outside of the dialog). It is easy to do it with jQuery:

$('.dialog-popup a.close, #dialog-overlay').click(function() { 
	$('.dialog-popup').fadeOut(200);
	$('#dialog-overlay').fadeOut(200);
	return false;
});

And we’re done. The dialog looks like this when it is displayed:

In case you do not like puzzle games and would rather see the whole code at once, here it is:

<html>
    <head>
    <style>
        #dialog-overlay {
            background: #000;
            bottom: 0;
            display: none;
            height: 100%;
            left: 0;
            margin-left: auto;
            margin-right: auto;
            opacity: 0.75;
            position: fixed;
            right: 0;
            top: 0;
            width: 100%;
            z-index: 99998;
        }

        .dialog-popup {
            background: none repeat scroll 0 0 #CCCCCC;
            border: 2px solid #222222;
            border-radius: 3px 3px 3px 3px;
            font-family: Verdana,Geneva,sans-serif;
            padding: 10px;
            display: none;
            left: 50%;
            position: fixed;
            top: 50%;
            z-index: 99999; 
        }

        .dialog-popup .close-button {
            float: right;
            margin: -26px -26px 0 0;
        }

        .dialog-popup form fieldset {
            border: medium none;
            padding: 0;
        }

        .dialog-popup form fieldset label {
            display: block;
            font-size: 1.2em;
        }

        .dialog-popup form fieldset label span,
        .dialog-popup form fieldset label input,
        .dialog-popup form button,
        .dialog-popup form a {
            display: block;
            margin-bottom: 10px;
        }

        .dialog-popup form fieldset label input {
            background: none repeat scroll 0 0 #EEEEEE;
            border-color: #FFFFFF #DDDDDD #DDDDDD #FFFFFF;
            border-radius: 3px 3px 3px 3px;
            border-style: solid;
            border-width: 1px;
            color: #000000;
            padding: 6px 6px 4px;
            width: 200px;
        }

        .dialog-popup form button.submit {
            border-color: #000000;
            border-radius: 3px 3px 3px 3px;
            border-width: 1px;
            cursor: pointer;
            margin-top: 10px;
            padding: 6px 6px 4px;
            width: 200px;
        }

        .dialog-popup form button.submit:hover {
            background-color: #E0E0E0;
        }    

        #forgot-password-link {
            color: #00AE00;
            font-size: 0.7em;
            text-align: center;
            text-decoration: none;
            width: 200px;
        }
    </style>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function() {
            $('a.dialog-link').click(function() {
                var dialog_id = $(this).attr('data-selector');
                $('#dialog-overlay').fadeIn(200);
                $(dialog_id).fadeIn(200);
                $(dialog_id).css({ 
                    'margin-top' : -($(dialog_id).height() + 4) / 2,
                    'margin-left' : -($(dialog_id).width() + 4) / 2
                });
                return false;
            });

            $('.dialog-popup a.close, #dialog-overlay').click(function() { 
                $('.dialog-popup').fadeOut(200);
                $('#dialog-overlay').fadeOut(200);
                return false;
            });
        });
    </script>
    </head>
    <body>
        <a href="#" data-selector="#login-dialog" class="dialog-link">Login</a>
        <div id="login-dialog" class="dialog-popup">
            <a href="#" class="close"><img src="close.png" class="close-button" title="Close this dalog" alt="Close" /></a>
            <form method="post" action="#">
                <fieldset>
                    <label for="username">
                        <span>Username</span>
                        <input type="text" id="username" name="username" placeholder="Username" value=""></input>
                    </label>
                    <label for="password">
                        <span>Password</span>
                        <input type="password" id="password" name="password" placeholder="Password" value=""></input>
                    </label>
                    </fieldset>
                <button class="submit" type="button">Login</button>
                <a href="#" id="forgot-password-link">Forgot your password? Click here.</a>
            </form>
        </div>
        <div id="dialog-overlay" title="Click here to close the dialog">
    </body>
</html>

I’m currently working on a web page which has a navigation area in the header and looks like this:

<nav>
    <ol class="main_menu">
        <li><a href="http://localhost/demo/index.php/home" class="active">home</a></li>
        <li><a href="http://localhost/demo/index.php/features">Features</a></li>
        <li><a href="http://localhost/demo/index.php/pricing">Pricing</a></li>
        <li><a href="http://localhost/demo/index.php/support">Support</a></li>
        <li><a href="http://localhost/demo/index.php/blog">Blog</a></li>
        <li><a href="http://localhost/demo/index.php/register">Sign up</a></li>
        <li><a href="http://localhost/demo/index.php/login">Login</a></li>
    </ol>
</nav>

Now I wanted to have the active page somehow highlighted so that the user can clearly see where he is. So first I defined some styles for this highlighting (basically just making it bold and underlined):

<style type="text/css">
    nav .active {
        font-weight: bold;
        text-decoration: underline;
    }
</style>

So what I needed now was some JavaScript to check the currently loaded URL and check which of the navigation links should be highlighted. All URLs start with http://localhost/demo/index.php. So I just needed to check the 4th part of the location path, find the navigation link related to that (so basically the link which ends with the same 4th part). Additionally if you go to http://localhost/demo/index.php you are shown the Home page even though the URL doesn’t end with /home. So I also needed to handle this special case.

So first I needed a JavaScript function to get the last part of the URL. Here I just needed to split the path using a slash as a separator and get the last one. There is just one exception: if the URL ends with a slash, I do not get the last one but the second to last (so that I do not get an empty result):

function getLastPart(url) {
    var parts = url.split("/");
    return (url.lastIndexOf('/') !== url.length - 1 ? parts[parts.length - 1] : parts[parts.length - 2]);
}

Now that we have it, we’ll get the last part of the URL and activate the link which ends with this last part. Additionally if the last part is index.php, we’ll highlight the Home link:

$(function() {
    var lastpart = getLastPart(window.location.href);
    $('nav a[href$="/' + lastpart + '"]').addClass('active');
    if (lastpart == "index.php") {
        $('nav a[href$="/home"]').addClass('active');
}

About the jQuery selector for the link selection:

nav a[href$="/home"]

It basically says to find a link in the navigation (i.e. nav a) having a href attribute (i.e. nav a[href…]) ending with (i.e. href$=) “/home”.

Of course if your URLs look different e.g. if you have query parameters or it is not the last part of the URL which is relevant for the link selection, you’ll need to adapt the getLastPart function. If it is not the last part of the URL which is relevant, you’ll also need to use a different selector.

Here the complete JavaScript:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js" type="text/javascript">
<script type="text/javascript">
<!--
$(function() {
    var lastpart = getLastPart(window.location.href);
    $('nav a[href$="/' + lastpart + '"]').addClass('active');
    if (lastpart == "index.php") {
        $('nav a[href$="/home"]').addClass('active');
}
  });
function getLastPart(url) {
    var parts = url.split("/");
    return (url.lastIndexOf('/') !== url.length - 1 ? parts[parts.length - 1] : parts[parts.length - 2]);
}
//-->
</script>