Image overlay in drupal, copied from paragraph to bottom of document

image-overlay.html.twig

{% set classes = [
  'paragraph',
  'paragraph--type--' ~ paragraph.bundle|clean_class,
  view_mode ? 'paragraph--view-mode--' ~ view_mode|clean_class,
  not paragraph.isPublished() ? 'paragraph--unpublished',
  'grid grid--medium image-overlay',
  grid_medium
] %}

{% block paragraph %}
  <div{{ attributes.addClass(classes) }}>
    {% block content %}
      <div class="image-overlay__wrapper image__wrapper">

        <div class="overlay js-overlay" id="overlay-{{ paragraph.id() }}">
          <div class="overlay__wrapper">

            <div class="overlay__button-wrapper">
              <button class="overlay__close js-close-overlay button button--icon">
                {{ 'Close'|t }}
                <span class="button__icon-wrapper">
                  <span class="icon icon-close button__icon">
                    <svg><use xlink:href="#icon-close"></use></svg>
                  </span>
                </span>
            </button>
            </div>
            <img src="{{ overlay_image }}" />
          </div>
        </div>

        <div class="doorway-overlay">
          <div class="doorway-overlay__image js-open-overlay" data-overlayid="overlay-{{ paragraph.id() }}">
            {{ content.field_image }}
            <div class="doorway-overlay__button-wrapper">
              <button class="doorway-overlay__button button button--icon">
                {{ 'View full screen'|t }}
                <span class="button__icon-wrapper">
                  <span class="icon icon-enlarge button__icon">
                    <svg><use xlink:href="#icon-enlarge"></use></svg>
                  </span>
                </span>
            </button>
            </div>
          </div>
          {% if content.field_caption.0 is not empty %}
            <span class="caption">
              {{ content.field_caption.0 }}
            </span>
          {% endif %}
        </div>
      </div>
    {% endblock %}
  </div>
{% endblock paragraph %}

imageoverlay.js

(function ($, Drupal, drupalSettings) {

  Drupal.behaviors.imageOverlay = {
    attach: function (context) {

      moveOverlay();

      // Als overlay, dan copy naar onderaan boven #footer
      function moveOverlay() {
        $('.js-overlay').detach().appendTo(document.body);
      }

      $('body', context).on('click', '.js-open-overlay', function (e) {
        e.preventDefault();
        var overlayid = $(this).attr('data-overlayid'); //overlaynaam
        thisoverlay = $('#' + overlayid);

        $('body').addClass('overlay-open');
        thisoverlay.fadeToggle(100);
      });


      $('body', context).on('click', '.js-close-overlay', function (e) {
        $(this).closest('.js-overlay').fadeOut(100);
        $('body').removeClass('overlay-open');
      });

      $(document).on('keyup', function (evt) {
        if (evt.keyCode == 27) {
          $('.js-overlay').fadeOut(100);
          $('body').removeClass('overlay-open');
        }
      });

    }
  };

})(jQuery, Drupal, drupalSettings);

overlay.scss

.overlay {
  position: fixed;
  display: none;
  width: 100%;
  height: 100%;
  top: 0;
  bottom: 0;
  left: 0;
  padding: 0;
  background: rgba(0,0,0, .6);
  z-index: 999;
  overflow-y: scroll;

  &__wrapper {
    position: absolute;
    max-width: 95%;
    top: 50%;
    left: 50%;
    margin: 0 auto;
    max-height: 95vh;
    width: 95%;
    transform: translateY(-50%) translateX(-50%);
    background-color: #fff;
    border-radius: 25px;
    padding: 24px;
    @media (min-width: $bp-tablet) {
      padding: 40px;
    }

    &--video {
      background-color: transparent;
      @media (min-width: $bp-tablet) {
        display: flex;
        align-items: center;
        justify-content: center;
      }

      .video__wrap {
          width: 100%;
          height: 0;
          padding-bottom: 56%;
          position: relative;

          iframe {
            height: 100%;
            position: absolute;
            left: 0;
            top: 0;
            bottom: 0;
            right: 0;
          }
      }
    }

    img {
      width: 100%;
      margin: 0 auto;
    }

    @media (min-width: 1400px) {
      max-width: 70%;
      max-height: 100%;
      width: 70%;
    }
  }

  &__button-wrapper {
    display: flex;
    justify-content: flex-end;

    @media (min-width: $bp-tablet) {
      display: block;
      position: absolute;
      top: -10px;
      right: -10px;
    }
  }

  &__close {
    border: 0;
    cursor: pointer;
    margin-bottom: 12px;
    margin-top: 12px;

    @media (min-width: $bp-tablet) {
      padding: 7px 6px 7px 20px;
      margin-top: 0;
    }

    .button__icon-wrapper {
      @media (min-width: $bp-tablet) {
        //margin-left: 0;
      }
      @media (min-width: $bp-tablet) {
        margin-bottom: 0;
      }
    }

    .button__text {
      @media (min-width: $bp-tablet) {
        // http://hugogiraudel.com/2016/10/13/css-hide-and-seek/ Screenreaders-only sr-only
        border: 0 !important;
        clip: rect(1px, 1px, 1px, 1px) !important;
        -webkit-clip-path: inset(50%) !important;
        clip-path: inset(50%) !important;
        height: 1px !important;
        overflow: hidden !important;
        padding: 0 !important;
        position: absolute !important;
        width: 1px !important;
        white-space: nowrap !important;
      }
    }

    &:focus {
      outline: none;
    }
  }

  &__icon {
    width: 11px;
    height: 11px;

    svg {
      fill: $color-6;
    }
  }
}

// body class when overlay active. Overlay the overlay on logo and search
.overlay-open {
  .header__logo,
  .header-search,
  .header__button {
    z-index: 0;
  }
}

.overlay--selection {
  .overlay__wrapper {
    max-width: 480px;
  }
}