Learn/Code
10 of 11
Learn

Basic introduction to jQuery (Part 4)

Making tooltips, modals, and more by styling our pop-ups. Plus, adding a reusable "close" button.

WORKING DRAFT: 10/18/14

Okay, this is the last part of the “intro to jQuery” tutorials… you can start with the previous tutorials if you’d like:

Part 1 | Part 2 | Part 3

This time, we’re going to round out the functionality of the pop-ups by adding an optional “close” button inside of the pop-up, and use some different CSS to style the pop-ups differently—making them appear as completely separate features, utilizing the same basic jQuery functionality.

Let’s review where we’re at first. The pop-ups we’ve currently got should work like the following example—click the orange buttons to see:

See the Pen jQuery Tooltip (Part 8) by Alex Turnwall (@alturnwall) on CodePen.0

The popups can be toggled on and off by clicking on the corresponding button, and in addition, only one can be open at once (so if one is open, and you click another button, the last will close). These particular pop-ups are styled as “tooltips”, but in this tutorial, we’re going to make an example of a larger pop-up, styled differently.

Adding a “close” button

Step 1

While I’d normally use the “x” icon for close buttons, to keep things simple, I’m just going to write the word “close” here. But, I’m still going to wrap that word in a new span element with a class of close_button , so that I can easily style later, and target with my javascript. The resulting HTML should look like this:

Step 2

To make these look a little more “button-like” for now, I’ll add the following styles to my CSS. (We’re going to learn how to use an icon font, instead of an image, to add the “x” icon in a later tutorial.) I’ve also given it a hover state, like our orange buttons have, for better affordance.

Now we should be able to see the buttons on our page, but we need to add some more javascript with our other jQuery to make it actually work.

Step 3

Since this is a completely different button than the previous stuff we wrote (even if it is visually inside of it)—we need to create a new event on a different element. In this case, the <span class="close_button">  is the element, and “click” is the new event. The new javascript is highlighted in the code below (which is everything we also wrote in the last tutorial).

This time, we used the jQuery .parent()  method (documentation here). This selects the direct parent of whatever our clickable element is. Since we put the “close_button” inside of the “my_target” div, “my_target” is the direct parent. So we’re essentially telling the browser:

“when we click on the “close_button” element, hide the element it is directly contained within.”

Importantly, also note that this new function is outside of the prior function, yet it is still contained within the  jQuery(document).ready function. Remember, that all of the jQuery we write can go inside that function, so that the browser knows to process all code within as jQuery.

Here’s the result:

See the Pen jQuery Tooltip (Part 9) by Alex Turnwall (@alturnwall) on CodePen.0

Now that we have this button to close the pop-up inside of the pop-up itself, we have more flexibility on how it looks, and where it can be placed—even if the placement ends up being on top of the original orange buttons that we clicked on to open it. In other words, now we can make larger pop-ups or modal windows that take up a larger portion of the page, still utilizing the exact same base tooltip functionality.

Changing the style, while re-using the functionality

Step 4

So let’s say our original styles (orange buttons, grey popups) are the style we want for the tooltips on our page, but maybe we’re also going to add other types of pop-ups that need more space, or just a different visual style for design purposes. We can do this easily using what we’ve already done, simply by making some different style changes.

We start by adding a new HTML element to our pages. And since we’re basically using the same code as before, we can just copy and paste the previous HTML. This time, we’re going to add a unique class to the whole thing, so we can style it separately.

All of the HTML structure is the same, but notice how we added a second class called dark_popup to the parent container? This is so we can style it—and the child elements—differently that our tooltips. Importantly, we kept all of the other class names the same, so that all of these new elements still inherit the previously defined styles. Basically, we’re using the new class to override only those styles we want to change.

Step 5

Now that we have that new class, we can use it to style that element, or any of it’s ancestors (children). Here, we’ll make both the button and the resulting pop-up look different, using this single class:

The result is below:

See the Pen jQuery Tooltip (Part 10) by Alex Turnwall (@alturnwall) on CodePen.0

Using this same method—keeping the general HTML structure the same, but adding additional classes—you can add as many different types of pop-ups to your page as you wish, without having to write additional javascript functionality!

This concludes the javascript functionality we’re exploring in this series—next time, we’ll get back to styling. Stay tuned…