Lightbox

<div id='data-lightbox'>
  <div id='lightbox-close' class="glyphicon glyphicon-remove"></div>
    Milwaukee Avenue, Clark Street, and Ashland Avenue</span> had the most accidents during this time. 
    <br>
    In Chicago, people are  commuting with bicycles to work.  The southern neighborhoods have a more sporadic pattern.  
    <br>
    The data was given to us by the <a href="http://illinois.gov/" class="footer-highlight-link"> Illinois Government </a>
</div>


Javascript controls:

  Include this: <link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-glyphicons.css" rel="stylesheet">
  
  var lightBoxShown = false;
   $('#data-source').click(function(){ // #data-source is just a clickable text.
    lightBoxShown = true;
    $('#svgContainer').css('opacity',0.1);

    var windowWidth = $(window).width();
    var windowHeight = $(window).height();
    var selfWidth = $(this).width(); var selfHeight = $(this).height();
    var moveX = 0.4*(windowWidth - selfWidth);
    var moveY = 0.35*(windowHeight - selfHeight);

    $('#data-lightbox').animate({
        'opacity':1.0}, 1500
    );
   });

  $('#svgContainer').click(function(){
      closeLightBox();
  });

  $('#lightbox-close').click(function(){
    closeLightBox();
  });
  
function closeLightBox(){
  if (lightBoxShown){
      $('#data-lightbox').animate({
        'opacity':0.0}, 'fast'
      );

      $('#svgContainer').animate({'opacity':1.0},'slow');
      lightBoxShown = false;
    };
}

CSS:
#data-lightbox {
  position: absolute;
  border-radius: 5px;
  opacity: 0.0;
  top: 35%;
  float:left;
  left:35%;
  border:1px;
  border-color: rgba(43, 40, 40, 0.5);
  border-style: outset;
  width: 500px;
  color :rgba(250,250,250,0.98);
  padding: 40px;
  font-size: 12px;
  letter-spacing: 1.5px;
  background-color:rgba(0, 0, 0, 0.2);
  z-index: 5;
}

#lightbox-close {
  background-color: rgba(0, 0, 0, 0.1);
  -moz-border-radius: 50px;
  -webkit-border-radius: 50px;
  border: 2px solid rgba(0, 0, 0, 0.1);
  cursor: pointer;
  opacity: 0.25;
  height: 15%;
  width: 5%;
  padding: 5px;
  position: absolute;
  top: 2%;
  left: 95%;
}