LOADING...

Preview

Pen ID
Unlock Campus Themeforest adv

 

Code
Open Overlay

I'm a super simple (yet cool) overlay.

Also, I like bacon.

Shoulder turducken pastrami meatloaf. Drumstick short loin pastrami short ribs chuck beef ribs. Shankle kevin sirloin, fatback hamburger tenderloin t-bone filet mignon short ribs. Meatball jowl turkey, tri-tip tail salami pastrami spare ribs pork loin porchetta andouille short ribs corned beef tongue pig. Strip steak pork pancetta tail. Shank flank meatball, filet mignon jowl brisket pork chop strip steak.

CSS
.overlay {
  overflow: scroll;
  position: fixed;
  top: 0;
  bottom: 110%;
  left: 0;
  right: 0;
  width: 100%;
  z-index: 10000;
  opacity: 0;
  background: #4D4D4D;
  transition: opacity 200ms linear, bottom 0s linear 200ms;
}
.overlay-open {
  bottom: 0;
  opacity: 1;
  transition: opacity 200ms linear, bottom 0s linear;
}
.overlay-view {
  overflow: hidden;
}
.overlay-form .overlay-inner {
  background: #FFF;
  margin: 5rem auto;
  padding: 4rem;
  max-width: 700px;
}
.admin-bar .overlay {
  top: 32px;
}
@media screen and (max-width: 782px) {
  .admin-bar .overlay {
    top: 46px;
  }
}
html {
  background-color: #2d2d2d;
  background-size: cover;
  background-position: center center;
}
body {
  padding-bottom: 80em;
}
.overlay-trigger {
  display: block;
  max-width: 14rem;
  margin: 6.25rem auto;
  padding: 2rem;
  background: #F0787C;
  border-radius: 2px;
  color: #FFF;
  font-size: 1.5rem;
  font-family: 'Oxygen', sans-serif;
  text-align: center;
  text-decoration: none;
  transition: all 200ms linear;
}
.overlay-trigger:hover {
  background: #eb4a4f;
}
.overlay-inner {
  max-width: 40rem;
  margin: 5rem;
  padding: 2rem;
  background: #FFF;
}
@media screen and (min-width: 52rem) {
  .overlay-inner {
    margin-left: auto;
    margin-right: auto;
  }
}
JS
( function($) {
	/**
	 * Our trigger event for opening the overlay. This class
	 * should exist on the overlay trigger, as well as an
	 * attribute (data-overlay) to adentify the overlay to open.
	*/
	$( '.overlay-trigger' ).on( 'click', function( event ) {
		event.preventDefault();

		/**
		 * Set the overlay variable based on the data provided
		 * by the overlay trigger.
		 */
		var overlay = $( this ).data( 'overlay' );

		/**
		 * If the overlay variable is not defined, give a message
		 * and return.
		*/
		if ( ! overlay ) {
			console.log( 'You must provide the overlay id in the trigger. (data-overlay="overlay-id").' );
			return;
		}

		/**
		 * If we've made it this far, we should have the data
		 * needed to open a overlay. Here we set the id variable
		 * based on overlay variable.
		 */
		var id = '#' + overlay;

		/**
		 * Let's open up the overlay and prevent the body from
		 * scrolling, both by adding a simple class. The rest
		 * is handled by CSS (awesome).
		 */
		$( id ).addClass( 'overlay-open' );
		$( 'body' ).addClass( 'overlay-view' );

		/**
		 * When the overlay outer wrapper or `overlay-close`
		 * triger is clicked, lets remove the classes from
		 * the current overlay and body. Removal of these
		 * classes restores the current state of the user
		 * experience. Again, all handled by CSS (awesome).
		 */
		$( id ).on( 'click', function( event ) {
			// Verify that only the outer wrapper was clicked.
			if ( event.target.id == overlay ) {
				$( id ).removeClass( 'overlay-open' );
				$( 'body' ).removeClass( 'overlay-view' );
			}
		});

		/**
		 * Closes the overlay when the esc key is pressed. See
		 * comment above on closing the overlay for more info
		 * on how this is accomplished.
		 */
		$( document ).keyup( function( event ) {
			// Verify that the esc key was pressed.
			if ( event.keyCode == 27 ) {
				$( id ).removeClass( 'overlay-open' );
				$( 'body' ).removeClass( 'overlay-view' );
			}
		});
	});
}) (jQuery);
Host Instantly Drag and Drop Website Builder

 

Description

I like the idea of simplicity and a modal/lightbox/overlay library is not always the answer when trying to draw the users attention.
Term
Mon, 11/27/2017 - 21:59

Related Codes

Pen ID
Pen ID
Pen ID