Outside HTML Colorbox

I'm trying to get my webpage to use the kind of color box that is demoed on this website here. http://www.jacklmoore.com/colorbox/example2/. (Outside HTML ajax Example).

In their code for this, they have:

$(".ajax").colorbox(); 

targeting:

<p> <a class='ajax' href="../content/ajax.html" title="Homer Defined"> Outside HTML (Ajax) </a> </p> 

My question is, I want the colorbox to display another page I have, when I click this Icon span on my page.

<span id="pause"> <i class="fa fa-pause"></i> </span> 

I've used on() to make it so when it's clicked it runs a function.

$("#pause").on("click", function() { game.pause(); }); 

Where as game.pause(); will create this effect, but I'm not sure how to make it happen, because I am not using a link like the examples.