Overlay

VIEWPORTS Full Width 1366px 1024px 768px 480px 320px

Default Form Video Search Brand Menu

Download Now

Code

HTML CSS SCSS JS

<div class="overlay-content-wrapper">
    <span class="overlay__close js-overlay__close">
        <i class="fas fa-times"></i>
    </span>
    <div class="block-header">
        <h4 class="heading--2">Overlay Title</h4>
    </div>
    <div class="block-content">
    </div>
</div>

.overlay__bg {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--overlay-background);
  opacity: 0.7;
  z-index: 11;
}

.overlay__close {
  position: absolute;
  top: -1.8rem;
  right: -1.8rem;
  width: 3.6rem;
  height: 3.6rem;
  background: var(--overlay-background);
  border: 0 none;
  border-radius: 3.2rem;
  outline: 0;
  cursor: pointer;
  z-index: 100;
}

.overlay__close .fa-times {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 1.8rem;
  line-height: 1;
  color: var(--inverted-text-color);
}

.overlay-content-wrapper {
  position: fixed;
  top: 50%;
  left: 50%;
  width: 100%;
  max-width: 76rem;
  height: auto;
  transform: translate(-50%, -50%);
  display: none;
  z-index: 12;
}

.overlay-content-wrapper .block-content {
  height: 100%;
  max-height: 72vh;
  margin-left: 0;
  padding: var(--spacing-2) 0;
  padding-bottom: 0;
  background: var(--inverted-text-color);
  overflow-y: auto;
  border-radius: .5rem;
}

.overlay-content-wrapper .block-header {
  padding-right: var(--spacing-2);
  color: var(--inverted-text-color);
}

.overlay-content-wrapper .heading--2 {
  margin-bottom: var(--spacing-2);
  font-weight: 300;
}

.overlay-content-wrapper .mktoLabel {
  color: var(--text-color);
}

.overlay__header {
  padding-right: 2.4rem;
  background: var(--overlay-header-background);
  color: var(--inverted-text-color);
}

.overlay__content {
  height: auto;
  max-height: 90vh;
  margin-left: 0;
  padding: var(--spacing-2) 0;
  padding-bottom: 0;
  background: var(--overlay-content-background);
  border-radius: 0.5rem;
  overflow-y: auto;
}

.overlay__content p {
  padding: 0 var(--spacing-1);
}

/* iPad Portrait  */
@media only screen and (max-width: 768px) {
  .overlay-content-wrapper[id^=marketo] {
    padding: 0 2.4rem;
  }
  .overlay__close {
    right: 0;
  }
}

/* iPhone 6 onwards */
@media only screen and (max-width: 480px) {
  .overlay-content-wrapper[id^=marketo] .block-content {
    height: 40rem;
  }
  .overlay-content-wrapper[id^=marketo] .heading--2 {
    font-size: 2.4rem;
  }
  .overlay__close {
    right: 2.4rem;
  }
}

/* iPhone 5 */
@media only screen and (max-width: 320px) {
  .overlay-content-wrapper[id^=marketo] {
    padding: 0 1.2rem;
  }
  .overlay-content-wrapper[id^=marketo] .block-content {
    height: 26rem;
  }
  .overlay__close {
    right: 1.2rem;
  }
}

.overlay__bg {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--overlay-background);
  opacity: 0.7;
  z-index: 11;
}

.overlay__close {
  position: absolute;
  top: -1.8rem;
  right: -1.8rem;
  width: 3.6rem;
  height: 3.6rem;
  background: var(--overlay-background);
  border: 0 none;
  border-radius: 3.2rem;
  outline: 0;
  cursor: pointer;
  z-index: 100;

  .fa-times {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 1.8rem;
    line-height: 1;
    color: var(--inverted-text-color);
  }
}

.overlay-content-wrapper {
  position: fixed;
  top: 50%;
  left: 50%;
  width: 100%;
  max-width: 76rem;
  height: auto;
  transform: translate(-50%, -50%);
  display: none;
  z-index: 12;

  .block-content {
    height: 100%;
    max-height: 72vh;
    margin-left: 0;
    padding: var(--spacing-2) 0;
    padding-bottom: 0;
    background: var(--inverted-text-color);
    overflow-y: auto;
    border-radius: .5rem;
  }
  .block-header {
    padding-right: var(--spacing-2);
    color: var(--inverted-text-color);
  }

  .heading--2 {
    margin-bottom: var(--spacing-2);
    font-weight: 300;
  }

  .mktoLabel {
    color: var(--text-color);
  }
}

.overlay__header {
  padding-right: 2.4rem;
  background: var(--overlay-header-background);
  color: var(--inverted-text-color);
}

.overlay__content {
  height: auto;
  max-height: 90vh;
  margin-left: 0;
  padding: var(--spacing-2) 0;
  padding-bottom: 0;
  background: var(--overlay-content-background);
  border-radius: 0.5rem;
  overflow-y: auto;

  p {
    padding: 0 var(--spacing-1);
  }
}

@include mq-3 {
  .overlay-content-wrapper[id^=marketo] {
    padding: 0 2.4rem;
  }

  .overlay__close {
    right: 0;
  }
}

@include mq-4 {
  

  .overlay-content-wrapper[id^=marketo] .block-content {
    height: 40rem;
  }

  .overlay-content-wrapper[id^=marketo] .heading--2 {
    font-size: 2.4rem;
  }

  .overlay__close {
    right: 2.4rem;
  }
}

@include mq-5 {
  .overlay-content-wrapper[id^=marketo] {
    padding: 0 1.2rem;
  }

  .overlay-content-wrapper[id^=marketo] .block-content {
    height: 26rem;
  }

  .overlay__close {
    right: 1.2rem;
  }
}

jQuery(function ($) {

    const searchOverlay = '#search-overlay';
    const jsOverlayClose = '.js-overlay__close';
    // OVERLAY
    $(document).on('click', '.overlay', function (e) {
        var overlayTrigger = $(this).data('overlay');

        if (!$('body').hasClass('header--inverted') && !$('body').hasClass('hasHeader')) {	
			$('body').addClass('header--inverted');	
		}

        $('body .overlay__bg').delay(350).remove();
        $('body').append('<div class="overlay__bg"></div>');
        $('.overlay-content-wrapper').removeClass('active').hide();
        $('.main').addClass('active--search');
        

        $(overlayTrigger).addClass('active').stop(true, false).fadeIn(350);

        if (($(this).data('overlay') === '#navigation--overlay') || ($(this).data('overlay') === searchOverlay)) {
            $('.abc').addClass('active--search');
            $('.action-bar').removeClass('action-bar--active');
        }
        if ($(this).data('overlay') === searchOverlay) {
            $('#edit-search-api-fulltext').focus();
            $(this).replaceWith('<a class="js-overlay__close" data-overlay="#search-overlay">Close <i class="fas fa-times"></i></a>');
        }
        if ($(this).hasClass('overlay__navigation')) {
			$('.overlay__navigation').removeClass('active js-overlay__close').addClass('overlay');
			$(this).removeClass('overlay').addClass('active js-overlay__close');	

		}
        e.preventDefault();
    });

    // OVERLAY CLOSE
    $(document).on('click', jsOverlayClose, function () {
        if (($(this).data('overlay') === '#navigation--overlay') || ($(this).data('overlay') === searchOverlay)) {
            $('.abc').removeClass('active--search');
            $('.action-bar').addClass('action-bar--active');
        }
        if ($(this).data('overlay') === searchOverlay) {
            $(this).replaceWith('<a class="overlay" data-overlay="#search-overlay">Search <i class="fas fa-search"></i></a>');
        }

        $('.overlay__bg, .overlay-content-wrapper').removeClass('active').stop(true, false).fadeOut(350);
        $('.overlay__bg').delay(350).remove();
        $('.main').removeClass('active--search');
        $('.overlay__navigation').removeClass('active js-overlay__close').addClass('overlay');
        $('.nav--active').trigger('click');

        if ($('body').hasClass('header--inverted') && !$('body').hasClass('hasHeader')) {	
			$('body').removeClass('header--inverted');	
		}

    });

    $(document).on('click', '.overlay__bg', function () {
        $(jsOverlayClose).trigger('click');
    });

    var keyEsc = 27;
    $(window.document).keyup(function (e) {
        if (e.keyCode === keyEsc) {
            $(jsOverlayClose).trigger('click');
        }
    });


    // TRIGGERS OVERLAY THROUGH URL
	if (window.location.href.includes('#marketo')) {
		var hash = window.location.hash;
	    $(`.overlay[data-overlay^="${hash}"]`).one().trigger('click');
	}

});

Design Files

Figma

Component Options

There are no options for this component.

Component

Form

Video

Overlay

REGIONS

SECTORS

CRITERIA

Entities

Insights

Code

Figma

Component Options