Creating CSS3 Pop-Up Dialogue Boxes
There’s been a huge advancement in the capabilities of CSS with the introduction of CSS3, and we’re seeing a lot of projects already using the new features. Today, we’ll combine a few of the new features we’ve learned thus far to create a dialogue box that pops up and displays more information about a link in our page. We’ll come across some transitions, some shadows, and even some rounded corners. Are you ready? Let’s go!
We used over 10 web hosting companies before we found Server Intellect. Our new server with cloud hosting, was set up in less than 24 hours. We were able to confirm our order over the phone. They responded to our inquiries within an hour. Server Intellect’s customer support and assistance are the best we’ve ever experienced.
STEP ONE:
The HTML
<!DOCTYPE html"> <html xmlns="http://www.w3.org/1999/xhtml" > <head> <title> Pure CSS3 popups </title> <link rel="Stylesheet" href="style.css" /> </head> <body> <section id="awesomeLinks"> <ul> <li id="link1"> <a href="#"> Sasuke Sarutobi </a> <div class="popup"> <span class="popText"> A world renowned ninja known for his acrobatic abilities and absolute loyalty </span> </div> </li> <li id="link2"> <a href="#"> Momochi Sandayu </a> <div class="popup"> <span class="popText"> A famous ninja who lead 3 even more famous ninja families </span> </div> </li> <li id="link3"> <a href="#"> Fujibayashi Nagato </a> <div class="popup"> <span class="popText"> A famous ninja known for his courage and gallantry </span> </div> </li> </ul> </section> </body> </html>
We’ve tried to keep the HTML as semantic as possible, while still making it accessible enough to accomplish our goal.
- We set up a “wrapper” for our links called “awesomeLinks”. This will help us to keep all of the elements together and easily positional.
- Inside of the “awesomeLinks” wrapper, we create an unordered list to hold each of our Divs as list items.
- In each list item we set up a link to the Ninja and a Div below it to hold the details.
The goal is to be able to hover over a link, and have a popup show us the details about the ninja we are hovering over. Now, we can go ahead and start adding some CSS.
STEP TWO:
The CSS
First, we need to have some basic CSS to get us started on our way. Our basic CSS will position our “awesomeLinks” wrapper near the center of the screen, slightly increase the font size, and remove the default list item decorations. We’ll also lay the links out horizontally at this point. Here’s what our initial CSS looks like, note that we’ll be adding much more:
#awesomeLinks { font-family: Verdana; font-size: 2em; position: absolute; top: 10em; left: 10em; } #awesomeLinks ul { list-style-type: none; } #awesomeLinks li { float: left; }
Go ahead and load the page up in your browser so you can see where we’re beginning. All you should have is the three links layered out horizontally at about center screen and the detail text below each link.
STEP THREE:
Styling the Pop-Up Dialogue
Our popup box is going to have much of the attention in or CSS file, so it’s probably best we start there. Have a look at the styling and then I’ll explain in detail what’s going on:
.popUp { background-color: #410591; border: 1px solid #000; color: #fff; font-size: smaller; padding: 1em; position: relative; right: 1em; width: 10em; -moz-border-radius: 15px; -moz-box-shadow: 3px 3px #000; -webkit-border-radius: 15px; -webkit-box-shadow: 3px 3px #999; }
We’ve added a selector for our PopUp Class and filled it in with quite a few declarations. First, we changed the background color to a royal purple, added a border, and changed the font color to white (#FFF). Next, we’ve made the font slightly smaller than the font of the link itself, and added a bit of padding to better center the text within the Pop-Up. We then move on to centering the Pop-Up below the link by using the position: relative declaration, and moving it from the right 1em. Finally we added a width declaration to shrink our Pop-Up bubbles some, and threw in some rounded corners and shadows as a final touch. The page should now look like this:
Our Pop-Up dialogue boxes are all styled and ready to go, and the next step will be to implement the sexy CSS transitions.
STEP FOUR:
Creating the Transitions
In order to begin, we’ll have to make our beautiful Pop-Ups disappear. Don’t worry, they’ll be back, but for now we’ll need to add a visibility: hidden declaration to our popUp Class like this:
.popUp { background-color: #410591; border: 1px solid #000; color: #fff; visibility: hidden; font-size: smaller; padding: 1em; position: relative; right: 1em; width: 10em; -moz-border-radius: 15px; -moz-box-shadow: 3px 3px #000; -webkit-border-radius: 15px; -webkit-box-shadow: 3px 3px #999; }
Now, all you should be able to see on the page are the links to each Ninja’s details. Before we can start our transitions, we’ll want to make sure that our Pop-Ups work without them. This means we’ll need to setup a :hover pseudo-class to help us accomplish this. When a user hovers over a link, we’ll need to make the Pop-Up visible again, and then move it so it sits above the link. Have a look at our :hover pseudo-class:
#awesomeLinks li:hover .popUp { visibility: visible; bottom: 9em; }
Now, when we hover near one of the list items, we’ll see our Pop-Up appear above the link that we’re over top of.
The final step is to add the transitioning effect. Recall that in CSS3, to create a transition we need to specify how long we’d like the transition to take, as well as the type of transition. Here’s how to change the popUp Class to reflect our new transitions:
.popUp { background-color: #410591; border: 1px solid #000; color: #fff; visibility: hidden; font-size: smaller; padding: 1em; position: relative; right: 1em; width: 10em; -moz-border-radius: 15px; -moz-box-shadow: 3px 3px #000; -webkit-border-radius: 15px; -webkit-box-shadow: 3px 3px #999; -webkit-transition: .3s ease-in-out; }
NOTE: We’ve only included the webkit version.
Now, go ahead and view the page in a browser so you can bask in the wonderful glory of CSS3. The Pop-Ups are finished, and took very little CSS and absolutely no JavaScript.
As you can see, CSS3 has moved the old version of CSS into a whole different level. Just so you’re aware, what you’ve just created used to take far more effort. Be sure to get familiar with the rounded corners, shadows, and transitions as you’re sure to see more use of these properties as the internet continues to progress. Join us next time to learn how to make some more cool CSS3 projects. See you then!
We migrated our web sites to Server Intellect over one weekend and the setup was so smooth that we were up and running right away. They assisted us with everything we needed to do for all of our applications. With Server Intellect’s help, we were able to avoid any headaches!
