There is a bunch of Lightbox style jQuery plugins, from the original Lightbox to some of the new alternatives such as FancyBox. So why another jQuery plugin? Well, at around 1kb(546 bytes gzipped) minified, SimpleBox is extremely light and provides you with a nice little dialog for your confirmation messages, forms and just about anything where a full LightBox is just overkill.

Using SimpleBox is extremely simple too, include the JS file, one image, and a couple of lines of CSS and you are good to go. In this post I will cover a typical use case demonstrating SimpleBox.

In the demo we are going to use a simple sign-up form. First stop is to create the HTML document and add the link that will trigger SimpleBox and the form we wish to be displayed.

<p><a href="#register" id="register" class="demo_button">SimpleBox With Form</a></p>

<form name="registration" id="registration" method="post" action="/register">
    <h1>Please Complete The Form Below</h1>
    <fieldset>
        <legend>Register</legend>
        <label for="name">Name:</label>
        <input type="text" name="name" id="name" />

        <label for="email">Email:</label>
        <input type="text" name="email" id="email" />

        <label for="username">Username:</label>
        <input type="text" name="username" id="username" />

        <input type="submit" id="register_me" value="Register" />
    </fieldset>
</form>

That’s the HTML all set-up. Next we need to link the CSS. In the head of your document, add the following:

<link href="css/screen.css" rel="stylesheet" type="text/css" media="screen" />

In the CSS file the following lines needs to be added for SimpleBox:

#registration  {
    display:none;
    background-color:#fff;
}
/* simplebox css */
#simplebox_wrapper {
	background-color:#333;
	background-color:rgba(51, 51, 51, 0.5);
	background-color:hsla(0, 0%, 20%, 0.5);
	position:absolute;
	top:0;
	left:0;
	z-index:9999;
}
#close_simplebox {
	position:absolute;
	background:transparent url(../images/close_round.png) 0 0 no-repeat;
	margin-top:-25px;
	border:0;
	width:30px;
	height:30px;
	text-indent:-99999em;
	cursor:pointer;
	cursor:hand;
}
.ie7 #close_simplebox {
	margin-left:40em;
}

From the above you will see that you will also need to add the image that you will find as part of the download. As far as the transparency that is set using RGBA and HSLA, obviously this will not work in IE but, not to worry, this is taken care of with JavaScript. You will also notice that we are setting the form to not be displayed. That is all the CSS you really need but, you can obviously style the form in which ever way you like.

All that is left to do now is link both jQuery as well as SimpleBox. Just before the closing body tag of your document, add the following:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>
<script src="js/jquery.simplebox.js"></script>

And the final step, bind an event handler to the link and set SimpleBox in motion when the link is clicked:

$().ready(function() {
	$("#register").click(function(event) {
		event.preventDefault();
		$("#registration").simplebox();
	});
});

Now, in general this will work fine and when the user is done, he can simply close the dialog using the close button but, what if you want to close the dialog from your own button, action or link? For this, there is the closeSimpleBox() function that basically works exactly like the function above. For example, say you have a button as follows in your dialog:

<input type="button" id="close_dialog" value="Confirm" />

You can use closeSimpleBox() as follows to close the dialog when the user clicks the button:

$("#close_dialog").click(function() {
    event.preventDefault();
    $("#dialog").closeSimpleBox();
});

One other small thing you should be aware off, SimpleBox also listens for the escape key and will close when the key is pressed. And that is that, I hope you find this plugin useful and look forward to hearing all of your comments. To see some working examples and grab the code, head over to the SimpleBox page.

UPDATE: Pushed a new version to Github. Dialog will now close when clicking outside the dialog. Closing SimpleBox has changed slightly. To close, simply call $(“#containerid”).simplebox(‘close’);

Image Courtesy : elaine faith