popup tutorial please note: if you have limited experience with html, i strongly suggest that you save your existing code somewhere before you start following this tutorial so that if something goes wrong you can go back to the old version of your theme and start again, as i won't be offering support for this tutorial.

---

paste the following before < /style>, no need to edit this

.click { cursor:help } /* for question mark cursor on hover */

#pop {
    width:100%;
    height:100%;
    top:0;left:0;
    position:fixed;
    z-index:999;
    background:rgba(255,255,255,.9); /* background of popup. adjust the .9 for the opacity of the background (1 will be solid white, .5 will be semi transparent, etc.)  */
    display:none;
}
.fade {
    top:0;
    left:0;
    position:fixed;
    z-index:1000;
    width:100%;
    height:100%;
}

.popup {
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
    position:fixed;
    background:#fff; /* background of popup box */
    padding:10px; /* padding of popup box */
    z-index:10000;
    max-width:300px; /* width of popup */
    border:1px solid #eee; /* popup border */
}

paste the following before < /head>, no need to edit this

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script><script>
$(document).ready(function(){
    $('.click,.fade').click(function() {
    $('#pop').fadeToggle();
    });
});
</script>

paste the following under < body>, you'll need to edit this section as this is where your popup content goes!

<div id="pop"> <div class="fade"></div>
    <div class="popup">
        Popup text goes here! <b>Bold</b>, <i>italics,</i> <a href="link url">links</a>, et cetera. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
    </div>
</div>

finally, you need to create the actual link for the popup so it will show up on click. if you want to have the popup within your sidebar/header links in the theme you're using, in the sidebar in the customisation menu there should be a bunch of options for inputting link names and link urls. this is what that section looks like in one of my themes:

in one of the "link url" options, paste this:

 #!" class="click 

so it looks like this:

alternatively, you can have the link to the popup in, for example, the top corner of your theme if you want it to be like an updates tab. in that case, under < body> you'd need to paste the following:

<div class="click">updates</div>

and before < /style> you'd need to add this:

.click {
    top:20px; /* distance from top */
    right:20px; /* distance from right - you can change this to left if you like */
    position:fixed; 
}

and that's it, you should be good to go! i hope you found this useful. i will not be answering questions about this tutorial: this is the basic outline of how to create a popup and you'll have to use google to figure out the rest. if you're experiencing issues, try retyping your quote marks or reinstalling, and please make sure you have SSL turned off in settings since that can cause it to glitch!