Simple jQuery Modal Window Tutorial

http://www.queness.com/post/77/simple-jquery-modal-window-tutorial

In this tutorial, I'm going to share how to create a simple modal window with jQuery. It selects all the anchor tags with name attribute set to "modal" and grab the DIV #id defined in the href and displays it as a modal window. jQuery has made everything so simple, be sure to check out the demonstrations, examples I made. It looks good :)

Introduction

In this tutorial, I'm going to share how to create a simple modal window with jQuery. I like jQuery, it makes everything so simple and so easy. In case you don't know what's modal window. You can click here. That's an example of a modal window.

In this website, I'm using facebox (inspiration from facebook). Others, such as lightbox, thickbox, multibox, litebox...... it's too many of them and they all are having different features.

Right, let's start, this example will show you how to create a modal window that will display the content of a DIV #ID.

My objectives are:

• Able to search the whole html document for A tag NAME="modal" attribute, so when users click on it, it will display the content of DIV #ID in the HREF attribute in Modal Window.
• A mask that will fill the whole screen.
• Modal windows that is simple and easy to modify.

1. HTML code and A tag attributes

view plaincopy to clipboardprint?

2. <a href="#dialog" name="modal">Simple Modal Windowa>
4. <div id="boxes">
9. <div id="dialog" class="window">
10. <b>Testing of Modal Windowb> |
13. <a href="#" class="close">Close ita>
15. div>
19. <div id="mask">div>
20. div>

2. CSS code

view plaincopy to clipboardprint?

3. Javascript

view plaincopy to clipboardprint?

It's very straight forward and easy to understand. Remember, you need to include jQuery framework.

4. Launch modal window with Javascript

Due to popular demand :), I have an example for it. The concept is simple. I wrapped the modal window script inside a function, and then you will able to call the modal window using javascript function call.

Yes, you will able to load the modal window on page load as well :)

view plaincopy to clipboardprint?

1. $(document).ready(function () {
2. //id is the ID for the DIV you want to display it as modal window
3. launchWindow(id);
4. });

Launch Modal Window with Javascript

And, if you want to close the modal window on key press, any keys you want, you can add the following function.

view plaincopy to clipboardprint?

1. $(document).keyup(function(e) {
2. if(e.keyCode == 13) {
3. $('#mask').hide();
4. $('.window').hide();
5. }
6. });

I think I should make another post about modal window. :)

5. Conclusion

Yes, that's all you need to make a simple jquery modal window. In this tutorial, it shown you the concept of how to display DIV content inside a modal window. However, you can further develop it to accept a link and display it in an iFrame and image gallery.

For those who's looking for a fully customizable Modal Window, you can try my method, if you have any other questions, please let me know. Thanks for reading.