Overlay Won't Fire On Click

Question

This is a combination of existing code I did not write. I'm not sure why the overlay won't fire. The point is to have the slider, fire a modal when "site-btn" is clicked, and open the modal with lengthy text content. The code starts out working on slide one. Slide two through four won't fire at all. The gradient sits on top of the overlay unless I delete the code altogether. z-index does not help. After several tries, fiddling with the css and javascript for days, I haven't made much progress at all. I need to figure this out. I'm not a huge coder, but I know my way around. Can anyone tell me what I am doing wrong? Here's the code:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
 <script type="text/javascript">
  jQuery(document).ready(function(){

   function detect_active(){
      // get active
      var get_active = $("#dp-slider .dp_item:first-child").data("class");
      $("#dp-dots li").removeClass("active");
      $("#dp-dots li[data-class="+ get_active +"]").addClass("active");
     }
     $("#dp-next").click(function(){
      var total = $(".dp_item").length;
      $("#dp-slider .dp_item:first-child").hide().appendTo("#dp-slider").fadeIn();
      $.each($('.dp_item'), function (index, dp_item) {
       $(dp_item).attr('data-position', index + 1);
      });
      detect_active();

     });

     $("#dp-prev").click(function(){
      var total = $(".dp_item").length;
      $("#dp-slider .dp_item:last-child").hide().prependTo("#dp-slider").fadeIn();
      $.each($('.dp_item'), function (index, dp_item) {
       $(dp_item).attr('data-position', index + 1);
      });

      detect_active();
     });

     $("#dp-dots li").click(function(){
      $("#dp-dots li").removeClass("active");
      $(this).addClass("active");
      var get_slide = $(this).attr('data-class');
      console.log(get_slide);
      $("#dp-slider .dp_item[data-class=" + get_slide + "]").hide().prependTo("#dp-slider").fadeIn();
      $.each($('.dp_item'), function (index, dp_item) {
       $(dp_item).attr('data-position', index + 1);
      });
     });


     $("body").on("click", "#dp-slider .dp_item:not(:first-child)", function(){
      var get_slide = $(this).attr('data-class');
      console.log(get_slide);
      $("#dp-slider .dp_item[data-class=" + get_slide + "]").hide().prependTo("#dp-slider").fadeIn();
      $.each($('.dp_item'), function (index, dp_item) {
       $(dp_item).attr('data-position', index + 1);
      });

      detect_active();
     });
    });
   </script>
   <script type="text/javascript">

var body = document.body,
    overlay = document.querySelector('.overlay'),
    overlayBtts = document.querySelectorAll('button[class$="overlay"]');

[].forEach.call(overlayBtts, function(btt) {

  btt.addEventListener('click', function() { 

     /* Detect the button class name */
     var overlayOpen = this.className === 'open-overlay';

     /* Toggle the aria-hidden state on the overlay and the 
        no-scroll class on the body */
     overlay.setAttribute('aria-hidden', !overlayOpen);
     body.classList.toggle('noscroll', overlayOpen);

     /* On some mobile browser when the overlay was previously
        opened and scrolled, if you open it again it doesn't 
        reset its scrollTop property */
     overlay.scrollTop = 0;

  }, false);

});

*{
   font-family: 'Lato', sans-serif;
  }
  .dp-wrap {
      margin: 0 auto;
      position: relative;
      perspective: 1000px;
      height: 100%;
  }
  .dp-slider {
      height: 100%;
      width: 100%;
      position: absolute;
      transform-style: preserve-3d;
  }
  .dp-slider div {
      transform-style: preserve-3d;
  }
  .dp_item {
      display: block;
      position: absolute;
      text-align: center;
      color: #FFF;
      border-radius: 10px;
      transition: transform 1.2s;
  }
  .dp-img img {
      border-left: 1px solid #fff;
  }
  #dp-slider .dp_item:first-child {
      z-index: 10 !important;
      transform: rotateY(0deg) translateX(0px) !important;
  }
  .dp_item[data-position="2"] {
      z-index: 9;
      transform: rotateY(0deg) translateX(10%) scale(0.9);
  }
  .dp_item[data-position="3"] {
      z-index: 8;
      transform: rotateY(0deg) translateX(20%) scale(0.8);
  }
  .dp_item[data-position="4"] {
      z-index: 7;
      transform: rotateY(0deg) translateX(30%) scale(0.7);
  }
  #dp-next,
  #dp-prev {
      position: absolute;
      top: 50%;
      right: 16%;
      height: 33px;
      width: 33px;
      z-index: 10;
      cursor: pointer;
  }
  #dp-prev {
      left: 15px;
      transform: rotate(180deg);
  }
  #dp-dots {
      position: absolute;
      bottom: 25px;
      z-index: 12;
      left: 38%;
      cursor: default;
  }

  #dp-dots li {
      display: inline-block;
      width: 13px;
      height: 13px;
      background: #ffff;
      border-radius: 50%;
  }
  #dp-dots li:hover {
   cursor: pointer;
   background: #FA8C8C;
   transition: background .3s;
  }
  #dp-dots li.active {
      background: #FA8C8C;
  }
  .dp_item {
      width: 85%;
  }
  .dp-content ,
  .dp-img {
      text-align: left;
  }
  .dp_item {
   display: flex;
   align-items: center;
   background: #fff;
   border-radius: 10px;
   overflow: hidden;
   border-top: 5px solid #FA8C8C;
  }
  .dp-content {
      padding-left: 100px;
      padding-right: 0;
      display: inline-block;
      width: 100%;
  }
  .dp-content h2 {
      color: #41414B;
      font-family: Circular Std Bold;
      font-size: 48px;
      max-width: 460px;
      margin-top: 8px;
      margin-bottom: 0px;
  }
  .dp-content p {
      color: #74747F;
      max-width: 490px;
      margin-top: 15px;
      font-size: 24px;
  }
  .dp-content .site-btn {
     margin-top: 15px;
     font-size: 13px;
     padding: 19px 40px;
  }
  .dp-img:before {
      background: -webkit-linear-gradient(-90deg, rgba(255, 255, 255, 0.25), rgba(255, 255, 255, 0));
      background: -o-linear-gradient(-90deg, rgba(255, 255, 255, 0.25), rgba(255, 255, 255, 0));
      background: -moz-linear-gradient(-90deg, rgba(255, 255, 255, 0.25), rgba(255, 255, 255, 0));
      background: linear-gradient(-90deg, rgba(255, 255, 255, 0.75), rgba(255, 255, 255, 0));
      content: "";
      position: absolute;
      height: 100%;
      width: 25%;
      z-index: 1;
      top: 0;
      pointer-events: none;
      background: -webkit-linear-gradient(-90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.75));
      background: -o-linear-gradient(-90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.75));
      background: -moz-linear-gradient(-90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.75));
      background: linear-gradient(-90deg, rgba(255, 255, 255, 0), rgb(255, 255, 255));
  }
  .dp-img img {
      object-fit: cover;
      object-position: right;
  }
  #dp-slider,
  .dp-img img {
      height: 738px;
  }
  #dp-slider .dp_item:hover:not(:first-child) {
      cursor: pointer;
  }
  .site-btn {
    color: #fff;
    font-size: 18px;
    font-family: "Circular Std Medium";
    background: #FA8282;
    padding: 14px 43px;
    display: inline-block;
    border-radius: 2px;
    position: relative;
    top: -12px;
    text-decoration: none;
  }
  .site-btn:hover{
    text-decoration: none;
    color: #fff;
  }
  h1 { margin: 150px auto 30px auto; text-align: center; }
  
  /* to the body element */
.noscroll { overflow: hidden; }

@media (min-device-width: 1025px) {
  .noscroll { 
      padding-right: 15px;
  }
}

.overlay { 
   position: fixed; 
   overflow-y: scroll;
   top: 0; left: 0; top: 0; bottom: 0;
}

[aria-hidden="true"] {    
  transition: opacity 1s, z-index 0s 1s;
  width: 100vw;
  z-index: -1; 
  opacity: 0;  }

[aria-hidden="false"] {  
  transition: opacity 1s;
  width: 100%; 
  z-index: 1;  
  opacity: 1; 
}

.overlay div {
   margin: 15vh auto;
   width: 80%;
   max-width: 650px;
   padding: 30px;
   min-height: 200vh;
   background: rgba(255,255,255, .95);
}
.overlay {
    background:  rgba(40,40,40, .75);
}

* { box-sizing: border-box; }
button { padding: 1.5em 4em; cursor: pointer;}
pre { background: #fafafa; padding: 15px; border: 1px #ccd dashed; }
pre + p { margin: 5vh 0; }

<div class="container" style="max-width: 1400px; margin: 0 auto;">
  <div id="slider">
  <div class="dp-wrap">
    <div id="dp-slider">

      <div class="dp_item" data-class="1" data-position="1">
        <div class="dp-content">

          <h2>Slide 1</h2>
          <p> This is Slide 1 </p>
          <button type="button" class="open-overlay">OPEN LAYER</button>
          <section class="overlay" aria-hidden="true">
  <div>
    <h2>Hello, I'm the overlayer</h2>
    ...   
    <button type="button" class="close-overlay">CLOSE LAYER</button>
  </div>
</section>
        </div>
        <div class="dp-img">
          <img class="img-fluid" src="https://placeimg.com/821/739/any" alt="Intro">
        </div>
      </div>

      <div class="dp_item" data-class="2" data-position="2">
        <div class="dp-content">

          <h2>Slide 2</h2>
          <p> This is Slide 2 </p>
          <button type="button" class="open-overlay">OPEN LAYER</button>
        <section class="overlay" aria-hidden="true">
  <div>
    <h2>Hello, I'm the overlayer</h2>
    ...   
    <button type="button" class="close-overlay">CLOSE LAYER</button>
  </div>
</section>
        </div>
        <div class="dp-img">
          <img class="img-fluid" src="https://placeimg.com/821/738/any" alt="GYFN">
        </div>
      </div>

      <div class="dp_item" data-class="3" data-position="3">
        <div class="dp-content">

          <h2>Slide 3</h2>
          <p> This is Slide 3 </p>
          <button type="button" class="open-overlay">OPEN LAYER</button>
          <section class="overlay" aria-hidden="true">
  <div>
    <h2>Hello, I'm the overlayer</h2>
    ...   
    <button type="button" class="close-overlay">CLOSE LAYER</button>
  </div>
</section>
        </div>
        <div class="dp-img">
          <img class="img-fluid" src="https://placeimg.com/821/737/any" alt="AW">
        </div>
      </div>

      <div class="dp_item" data-class="4" data-position="4">
        <div class="dp-content">

          <h2>Slide 4</h2>
          <p> This is Slide 4 </p>
          <button type="button" class="open-overlay">OPEN LAYER</button>
          <section class="overlay" aria-hidden="true">
  <div>
    <h2>Hello, I'm the overlayer</h2>
    ...   
    <button type="button" class="close-overlay">CLOSE LAYER</button>
  </div>
</section>
        </div>
        <div class="dp-img">
          <img class="img-fluid" src="https://placeimg.com/821/736/any" alt="ACME">
        </div>
      </div>
    </div>

    <span id="dp-next">
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 51.401 51.401">
        <defs>
          <style>
            .cls-1 {
              fill: none;
              stroke: #fa8c8c;
              stroke-miterlimit: 10;
              stroke-width: 7px;
            }
          </style>
        </defs>
        <path id="Rectangle_4_Copy" data-name="Rectangle 4 Copy" class="cls-1" d="M32.246,0V33.178L0,31.953" transform="translate(0.094 25.276) rotate(-45)"/>
      </svg>
    </span>

    <span id="dp-prev">
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 51.401 51.401">
        <defs>
          <style>
            .cls-1 {
              fill: none;
              stroke: #fa8c8c;
              stroke-miterlimit: 10;
              stroke-width: 7px;
            }
          </style>
        </defs>
        <path id="Rectangle_4_Copy" data-name="Rectangle 4 Copy" class="cls-1" d="M32.246,0V33.178L0,31.953" transform="translate(0.094 25.276) rotate(-45)"/>
      </svg>
    </span>



    <ul id="dp-dots">
      <li data-class="1" class="active"></li>
      <li data-class="2"></li>
      <li data-class="3"></li>
      <li data-class="4"></li>
    </ul>
  </div>
</div>
 </div>

Answer 1

The overlay = document.querySelector('.overlay') in your JS only selects the first overlay object (querySelector Docs) which is inside the first slider container. That's why you don't see it, when your on the second or third slide.

It's common to have the modal outside of other containers. It's a modal after all. Try moving out your code like this.

<!-- MODAL -->

<section class="overlay" aria-hidden="true">
    <div>
        <h2>Hello, I'm the overlayer</h2>
        ...
        <button type="button" class="close-overlay">CLOSE LAYER</button>
      </div>
    </section>

<!-- MODAL -->

<div class="container" style="max-width: 1400px; margin: 0 auto;">
  <div id="slider">
    <div class="dp-wrap">
      <div id="dp-slider">

        <div class="dp_item" data-class="1" data-position="1">
          <div class="dp-content">

            <h2>Slide 1</h2>
            <p> This is Slide 1 </p>
            <button type="button" class="open-overlay">OPEN LAYER</button>               
          </div>
          <div class="dp-img">
            <img class="img-fluid" src="https://placeimg.com/821/739/any" alt="Intro">
          </div>
        </div>

        <div class="dp_item" data-class="2" data-position="2">
          <div class="dp-content">

            <h2>Slide 2</h2>
            <p> This is Slide 2 </p>
            <button type="button" class="open-overlay">OPEN LAYER</button>
          </div>
          <div class="dp-img">
            <img class="img-fluid" src="https://placeimg.com/821/738/any" alt="GYFN">
          </div>
        </div>

        <div class="dp_item" data-class="3" data-position="3">
          <div class="dp-content">

            <h2>Slide 3</h2>
            <p> This is Slide 3 </p>
            <button type="button" class="open-overlay">OPEN LAYER</button>
          </div>
          <div class="dp-img">
            <img class="img-fluid" src="https://placeimg.com/821/737/any" alt="AW">
          </div>
        </div>

        <div class="dp_item" data-class="4" data-position="4">
          <div class="dp-content">

            <h2>Slide 4</h2>
            <p> This is Slide 4 </p>
            <button type="button" class="open-overlay">OPEN LAYER</button>
          </div>
          <div class="dp-img">
            <img class="img-fluid" src="https://placeimg.com/821/736/any" alt="ACME">
          </div>
        </div>
      </div>

      <span id="dp-next">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 51.401 51.401">
          <defs>
            <style>
              .cls-1 {
                fill: none;
                stroke: #fa8c8c;
                stroke-miterlimit: 10;
                stroke-width: 7px;
              }

            </style>
          </defs>
          <path id="Rectangle_4_Copy" data-name="Rectangle 4 Copy" class="cls-1" d="M32.246,0V33.178L0,31.953" transform="translate(0.094 25.276) rotate(-45)" />
        </svg>
      </span>

      <span id="dp-prev">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 51.401 51.401">
          <defs>
            <style>
              .cls-1 {
                fill: none;
                stroke: #fa8c8c;
                stroke-miterlimit: 10;
                stroke-width: 7px;
              }

            </style>
          </defs>
          <path id="Rectangle_4_Copy" data-name="Rectangle 4 Copy" class="cls-1" d="M32.246,0V33.178L0,31.953" transform="translate(0.094 25.276) rotate(-45)" />
        </svg>
      </span>



      <ul id="dp-dots">
        <li data-class="1" class="active"></li>
        <li data-class="2"></li>
        <li data-class="3"></li>
        <li data-class="4"></li>
      </ul>
    </div>
  </div>
</div>

This should work. Try to play with the code: https://jsfiddle.net/andresabadia/n45gq7eL/1/

The solution above will work with only one modal if you want a modal for every slider you should also put the modals outside the containers and update the JS like so:

HTML:

<!--Modal-1-->
<section class="overlay overlay-1" aria-hidden="true">
  <div>
    <h2>Hello, I'm the overlayer 1</h2>
    ...
    <button type="button" class="close-overlay" data-modal="1">CLOSE LAYER</button>
  </div>
</section>
<!--Modal-1-->
<!--Modal-2-->
<section class="overlay overlay-2" aria-hidden="true">
  <div>
    <h2>Hello, I'm the overlayer 2</h2>
    ...
    <button type="button" class="close-overlay" data-modal="2">CLOSE LAYER</button>
  </div>
</section>
<!--Modal-2-->
<!--Modal-3-->
<section class="overlay overlay-3" aria-hidden="true">
  <div>
    <h2>Hello, I'm the overlayer 3</h2>
    ...
    <button type="button" class="close-overlay" data-modal="3">CLOSE LAYER</button>
  </div>
</section>
<!--Modal-3-->
<!--Modal-4-->
<section class="overlay overlay-4" aria-hidden="true">
  <div>
    <h2>Hello, I'm the overlayer 4</h2>
    ...
    <button type="button" class="close-overlay" data-modal="4">CLOSE LAYER</button>
  </div>
</section>
<!--Modal-4-->
<div class="container" style="max-width: 1400px; margin: 0 auto;">
  <div id="slider">
    <div class="dp-wrap">
      <div id="dp-slider">

        <div class="dp_item" data-class="1" data-position="1">
          <div class="dp-content">

            <h2>Slide 1</h2>
            <p> This is Slide 1 </p>
            <button type="button" class="open-overlay" data-modal="1">OPEN LAYER</button>
          </div>
          <div class="dp-img">
            <img class="img-fluid" src="https://placeimg.com/821/739/any" alt="Intro">
          </div>
        </div>

        <div class="dp_item" data-class="2" data-position="2">
          <div class="dp-content">

            <h2>Slide 2</h2>
            <p> This is Slide 2 </p>
            <button type="button" class="open-overlay" data-modal="2">OPEN LAYER</button>
          </div>
          <div class="dp-img">
            <img class="img-fluid" src="https://placeimg.com/821/738/any" alt="GYFN">
          </div>
        </div>

        <div class="dp_item" data-class="3" data-position="3">
          <div class="dp-content">

            <h2>Slide 3</h2>
            <p> This is Slide 3 </p>
            <button type="button" class="open-overlay" data-modal="3">OPEN LAYER</button>
          </div>
          <div class="dp-img">
            <img class="img-fluid" src="https://placeimg.com/821/737/any" alt="AW">
          </div>
        </div>

        <div class="dp_item" data-class="4" data-position="4">
          <div class="dp-content">

            <h2>Slide 4</h2>
            <p> This is Slide 4 </p>
            <button type="button" class="open-overlay" data-modal="4">OPEN LAYER</button>
          </div>
          <div class="dp-img">
            <img class="img-fluid" src="https://placeimg.com/821/736/any" alt="ACME">
          </div>
        </div>
      </div>

      <span id="dp-next">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 51.401 51.401">
          <defs>
            <style>
              .cls-1 {
                fill: none;
                stroke: #fa8c8c;
                stroke-miterlimit: 10;
                stroke-width: 7px;
              }

            </style>
          </defs>
          <path id="Rectangle_4_Copy" data-name="Rectangle 4 Copy" class="cls-1" d="M32.246,0V33.178L0,31.953" transform="translate(0.094 25.276) rotate(-45)" />
        </svg>
      </span>

      <span id="dp-prev">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 51.401 51.401">
          <defs>
            <style>
              .cls-1 {
                fill: none;
                stroke: #fa8c8c;
                stroke-miterlimit: 10;
                stroke-width: 7px;
              }

            </style>
          </defs>
          <path id="Rectangle_4_Copy" data-name="Rectangle 4 Copy" class="cls-1" d="M32.246,0V33.178L0,31.953" transform="translate(0.094 25.276) rotate(-45)" />
        </svg>
      </span>



      <ul id="dp-dots">
        <li data-class="1" class="active"></li>
        <li data-class="2"></li>
        <li data-class="3"></li>
        <li data-class="4"></li>
      </ul>
    </div>
  </div>
</div>

JS:

jQuery(document).ready(function() {

  function detect_active() {
    // get active
    var get_active = $("#dp-slider .dp_item:first-child").data("class");
    $("#dp-dots li").removeClass("active");
    $("#dp-dots li[data-class=" + get_active + "]").addClass("active");
  }
  $("#dp-next").click(function() {
    var total = $(".dp_item").length;
    $("#dp-slider .dp_item:first-child").hide().appendTo("#dp-slider").fadeIn();
    $.each($('.dp_item'), function(index, dp_item) {
      $(dp_item).attr('data-position', index + 1);
    });
    detect_active();

  });

  $("#dp-prev").click(function() {
    var total = $(".dp_item").length;
    $("#dp-slider .dp_item:last-child").hide().prependTo("#dp-slider").fadeIn();
    $.each($('.dp_item'), function(index, dp_item) {
      $(dp_item).attr('data-position', index + 1);
    });

    detect_active();
  });

  $("#dp-dots li").click(function() {
    $("#dp-dots li").removeClass("active");
    $(this).addClass("active");
    var get_slide = $(this).attr('data-class');
    console.log(get_slide);
    $("#dp-slider .dp_item[data-class=" + get_slide + "]").hide().prependTo("#dp-slider").fadeIn();
    $.each($('.dp_item'), function(index, dp_item) {
      $(dp_item).attr('data-position', index + 1);
    });
  });


  $("body").on("click", "#dp-slider .dp_item:not(:first-child)", function() {
    var get_slide = $(this).attr('data-class');
    console.log(get_slide);
    $("#dp-slider .dp_item[data-class=" + get_slide + "]").hide().prependTo("#dp-slider").fadeIn();
    $.each($('.dp_item'), function(index, dp_item) {
      $(dp_item).attr('data-position', index + 1);
    });

    detect_active();
  });
});

var body = document.body,
  overlay = document.querySelector('.overlay'),
  overlayBtts = document.querySelectorAll('button[class$="overlay"]');

[].forEach.call(overlayBtts, function(btt) {

  btt.addEventListener('click', function() {

    /* Detect the button class name */
    var overlayOpen = this.className === 'open-overlay';

    /* Toggle the aria-hidden state on the overlay and the 
       no-scroll class on the body */
    if (this.dataset.modal) {
      overlay = document.querySelector('.overlay.overlay-' + this.dataset.modal);
    }
    overlay.setAttribute('aria-hidden', !overlayOpen);
    body.classList.toggle('noscroll', overlayOpen);

    /* On some mobile browser when the overlay was previously
       opened and scrolled, if you open it again it doesn't 
       reset its scrollTop property */
    overlay.scrollTop = 0;

  }, false);

});

You can play around with this version of the code here: https://jsfiddle.net/andresabadia/n45gq7eL/3/

Answer 2

Andres Abadia thank you so much! I pasted a section block before "Header Slide #" but after the opening "data-position" and "dp-content" divs. The thinking was to include the overlay in the "dp-content" div so it's seen as part of that block of instructions. This allows the overlay to sit on top of the gradient and open as expected. The code needs some refining but the essential issue is resolved. You got the upvote from me, but my reputation is too low for it to count. In any case, thank you! Your resolution worked like a charm. Credit for the code goes to:

1. [3D Stack Card Slider With jQuery And CSS3]
2. [Fabrizio Calderan of Stack Overflow Community]