Alt Text button for mobile devices

[hijinksensue]

Per our conversation, here's the js I use on my site for this. The positioning and graphics are obviously specific to my site:

---

<script type="text/javascript">
jQuery(document).ready(function() {
    var cA = jQuery('#comic img').attr('alt');
    jQuery('<a id="checker"></a>').insertAfter('.comic_navi_wrapper').magnificPopup({
        items: {
            src: '<div class="alt-text-popup">'+cA+'</div>',
            type: 'inline'
        },
        removalDelay: 500,
        closeOnContentClick: true,
        closeBtnInside: true,
        mainClass: 'mfp-fade'
    });
});
</script>

<!--End Mobile Alt Text Button Code-->```

---

Note: the programmer that wrote this for me said it was using a style or a container that was specific to my theme and would need to be changed if I ever changed themes. Obviously it needs to be adjusted to be more universal. Maybe it could just overtake the comics div or something that you are guaranteed to have on every easel site. 

---

Here's the CSS if that helps: 

/\* Start Mobile Alt Text Styles */
# checker {

position:absolute;
width:125px;
height:41px;
background:url(http://hijinksensue.com/assets/misc/mobile-alt-text-button.png);
background-position:0 -40px;
display:inline-block;
bottom: 82px;
right: 25px;
cursor:pointer;

}
# checker:hover {

background-position:0 0;

}
@media (max-width:767px) {
    #checker {
        position: static;
    }
}
.alt-text-popup {
  position: relative;
  background: white;
  padding: 25px;
  width: auto;
  max-width: 600px;
  margin: 0 auto;
  font-size:20px;
  -webkit-border-radius: 14px;
  -moz-border-radius: 14px;
  border-radius: 14px;
}
# comic-wrap {

position: relative;

}
/\* End Mobile Alt Text Styles */