This is my first tutorial I've written here on Dream In Code, and it will be a short and fast one.
We will create a jQuery plug-in that opens a pop-up window with a header, a close button, and some room for adding text!

First of all, create a basic webpage which contains the following things:

Now, to create a plug-in for jQuery you start of by adding the signature of a plug-in in the base.js file:

(function($){
$.popUp = function(){
};
})(jQuery);

This can now be used as this:

$.popUp();

We do, however, need to add some code. We'll begin with letting the user of the plug-in add some parameters. The parameters should let the user add some header text and some body text for our pop-up! We'll also add some default parameters in case the user doesn't feel like adding anything.

This means that if the user only enters the body parameter the head of the plug-in will say 'Head Section'.
Now we create a function for building the window. We will build the pop-up regardless of user-defined css and add all the CSS inline. This could be a section for improvement in the future.

function buildPopUp(){
}

Now, here is the code for the buildPopUp() function, I will go through it afterwards:

First of all, we create all sections as single variables. If we wanted to save space and improve performance and all that, this could all be done in one gigantic line of code. This is, however, not very good for a tutorial, thus the sectioning.
We start out by creating what we call the 'window' variable. I call this 'window' because it will be the main part of the pop-up. The head section will be placed inside the window for several reasons (later).
The window section has some inline css. First of all its position is absolute. This is important because we need to be able to position it wherever we want. Secondly, we position it 50px from the top and from the left. This could, and probably should, be altered since this is not the best position for a pop-up. This is a tutorial though, so I will leave quite some room for improvement.
We also add an id (myPopUp) and a class (popUp). The id in this case isn't so important. The class however, will be used the head section as a selector.
The content is added with .html instead of .text which means we give the user some room to display the content in a way he/she wants to with html formatting.

The head section is placed as an absolute div inside the window. To get it displayed on top of the body section, we set the height to 30 and the top to -30 meaning the head will 'float' right on top of the body section. Since we use borders, however, we need to compensate and add pixles accordingly (test what happens if we don't).

For the head section we create to components, headText and headCloser. The reason for not adding it directly as text into the head section is that we want the text to the left and the close button to the right. So we create to spans that floats to the left and to the right.
The closer section also gets an event bound to it. If we click on the close button, it will look up through the DOM for it's .window parent (remember we added a .window class to the 'window' component) and removes it, thus removing all descending objects.
The closer button, as well as the head section will exist within the window, so they will all go. This is how the chain of elements look in the pop-up:

window->head->headComponents

Then we add the components to the head, the head to the window and the window to the 'body' section of the page.

This will however do nothing unless we add a call to the function in the bottom of our plug-in. So now, the plug-in looks like this: