<style>

span. a:link, span. a:visited{
height:px;
width:px;
display:block;
text-indent:-9999px;
//float:left;
position:absolute;
}

#NAV{
position:relative;
}
a:active{-moz-outline-style:none;outline: none;}
a:focus{-moz-outline-style:none;outline: none;}

span.00{position:absolute;left:0px;top:0px;opacity: 1.0;}

span.00 a:link,a:visited{background:url()0 0;opacity: 1.0;}
span.00 a:hover{background:url()1px -px;opacity: 1.0;}
span.01 a:hover{background:url() -px -px;opacity: 1.0;}
span.00 a:active{background:url()1px -0px}
span.01 a:active{background:url() -px -0px;opacity: 1.0;}

</style>

<span class="00 "><a href="#">Moose00</a></span>



</div>

Bootstrap modals

Put this in the HEAD

Replace the Buttons with this

<span class="00 " type="button" class="btn btn-info btn-sm" data-toggle="modal" data-target="#00"><a href="#00">00</a></span>

Put this at the bottom of the page

<div class="modal fade" id="00" role="dialog">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header 00">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">This is the Title for 00</h4>
</div>
<div class="modal-body">
<p>This is the Content for 00.</p>
</div>
</div>
</div>
</div>

Style for the Pop Up

In case you want a different color per "title"

.00{background-color:#900;color:#fff}
.01{background-color:#900;color:#fff}
.02{background-color:#900;color:#fff}
.03{background-color:#900;color:#fff}
.04{background-color:#900;color:#fff}
.05{background-color:#900;color:#fff}
.06{background-color:#900;color:#fff}
.07{background-color:#900;color:#fff}
.08{background-color:#900;color:#fff}
.09{background-color:#900;color:#fff}
.10{background-color:#900;color:#fff}