In this tutorial, you’ll learn how to get a pop-up box using a little bit of HTML. You can use this for an FAQ, ‘about me’, or anything else you’d like.

Example: (for a live example, go to our blog and click “example of a pop-up box”).  


1. Open up your theme’s HTML, or the info section of your theme under “Customize”. Essentially what you’ll be doing in this tutorial is replacing a link that already exists or making a new link. For example, if you want to replace the FAQ link on your blog that leads to your FAQ page with a pop-up box for your FAQ, find wherever in your theme that link exists. If the link doesn’t exist, figure out where you want it to appear.  

2. Once you’ve chosen the link you’re going to use, erase it and paste this code instead (or if it doesn’t already exist, just paste this code):

<a onmouseover=’this.style.cursor=”pointer” ’ onfocus=’this.blur();’ onclick=”document.getElementById(‘PopUp’).style.display = ‘block’ ” ><span style=”text-decoration: underline;”>example of a pop-up box</span></a>

<div id=’PopUp’ style=’display: none; position: absolute; left: 100px; top: 200px; border: solid black 1px; padding: 10px; background-color: #ffffff; text-align: justify; font-size: 9px; width: 400px;’>

YOUR TEXT HERE! 

<div style=’text-align: right;’><a onmouseover=’this.style.cursor=”pointer” ’ style=’font-size: 9px;’ onfocus=’this.blur();’ onclick=”document.getElementById(‘PopUp’).style.display = ‘none’ ” ><span style=”text-decoration: underline;”>Close</span></a></div>

</div>

3. Edit the settings to your liking (background color, width, position, border, font, etc). 

4. Click save & you’re done!

-Katie