title: Open and Close a Lightbox Feature Without the Use of Anchor Links?
body: <p>I am looking for a way to open and close this primarily CSS-based lightbox feature with an alternative method than using anchor links, (as demonstrated in the snippet below).</p>
  
  <p>I am thinking there must be some sort of JQuery function which could replace the CSS <code>:target</code> responses. Any suggestions?</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$('.pic &gt; img').click(function() {
    var srcToCopy = $(this).attr('src');
    $('body').find('.imgsrc').attr('src', srcToCopy);
    $('body').addClass('no-scroll');
  });
  
  $('#customlightbox-controls').on('click', function() {
    $('body').removeClass('no-scroll');
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>body {
    margin: 0;
    padding: 0;
    border: 0;
    height: 100%;
    width: 100%;
  }
  
  body.no-scroll {
    overflow: hidden;
  }
  
  .pic,
  #imgsrc {
    display: inline-block;
  }
  
  img {
    width: 100px
  }
  
  a {
    display: inline-block;
    line-height: 0;
  }
  
  .container {
    display: block;
    width: 100%;
    line-height: 0;
  }
  
  .customlightbox {
    top: 0%;
    bottom: 0%;
    box-sizing: border-box;
    position: fixed;
    left: 0;
    right: 0;
    background: rgba(0, 0, 0, 0.7);
    z-index: -5;
    opacity: 0;
  }
  
  .customlightbox-imgwrap {
    width: 100%;
    height: 100%;
    padding: 20px;
    box-sizing: border-box;
    position: relative;
    text-align: center;
  }
  
  .customlightbox img {
    width: auto;
    margin: auto;
    max-width: 100%;
    max-height: 100%;
    opacity: 0;
    position: relative;
    top: 50%;
    transform: translateY(-50%);
  }
  
  #customlightbox-controls {
    box-sizing: border-box;
    position: fixed;
    height: 50px;
    width: 50px;
    top: -50px;
    right: -3px;
    z-index: 5;
    border-left: 2px solid white;
    border-bottom: 2px solid white;
    opacity: .7;
  }
  
  #close-customlightbox {
    display: block;
    position: absolute;
    overflow: hidden;
    height: 30px;
    width: 30px;
    right: 10px;
    top: 10px;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
  }
  
  #close-customlightbox:before {
    content: "";
    display: block;
    position: absolute;
    height: 0px;
    width: 2px;
    left: 14px;
    top: 0;
    background: white;
    border-radius: 2px;
  }
  
  #close-customlightbox:after {
    content: "";
    display: block;
    position: absolute;
    width: 0px;
    height: 2px;
    top: 14px;
    left: 0;
    background: white;
    border-radius: 2px;
  }
  
  .customlightbox:target {
    z-index: 4;
    opacity: 1;
    display: inline-block;
  }
  
  .customlightbox:target img {
    opacity: 1;
  }
  
  .customlightbox:target~#customlightbox-controls {
    top: -3px;
  }
  
  .customlightbox:target~#customlightbox-controls #close-customlightbox:after {
    width: 30px;
  }
  
  .customlightbox:target~#customlightbox-controls #close-customlightbox:before {
    height: 30px;
  }
  
  .lb-animate {
    -webkit-transition: 0.5s ease-in-out;
    -moz-transition: 0.5s ease-in-out;
    -ms-transition: 0.5s ease-in-out;
    -o-transition: 0.5s ease-in-out;
    transition: 0.5s ease-in-out;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  
  &lt;!-- Lightbox Instance 1 --&gt;
  &lt;div class="container"&gt;
    &lt;a href="#view"&gt;
      &lt;div class="pic"&gt;
        &lt;img src="https://syedimranrocks.files.wordpress.com/2012/09/flower01low1.png"&gt;
      &lt;/div&gt;
    &lt;/a&gt;
  &lt;/div&gt;
  
  &lt;!-- Lightbox Instance 2 --&gt;
  &lt;div class="container"&gt;
    &lt;a href="#view"&gt;
      &lt;div class="pic"&gt;
        &lt;img src="http://downloadicons.net/sites/default/files/Rose-Coral-Icon-906534.png"&gt;
      &lt;/div&gt;
    &lt;/a&gt;
  &lt;/div&gt;
  
  &lt;!-- Lightbox Instance 3 --&gt;
  &lt;div class="container"&gt;
    &lt;a href="#view"&gt;
      &lt;div class="pic"&gt;
        &lt;img src="https://images.vexels.com/media/users/3/136645/isolated/lists/54b1517db1906889a6971939de45d2a8-purple-sunflower-cartoon.png"&gt;
      &lt;/div&gt;
    &lt;/a&gt;
  &lt;/div&gt;
  
  &lt;!-- Lightbox Prompt --&gt;
  &lt;div class="customlightbox lb-animate" id="view"&gt;
    &lt;div class="customlightbox-imgwrap"&gt;
      &lt;img class="imgsrc" id="customlightbox-img" src=""&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;div id="customlightbox-controls" class="lb-animate"&gt;
    &lt;a id="close-customlightbox" class="lb-animate" href="#!"&gt;&lt;/a&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>