Information Popup

by Daniel Pegues

HTML

<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<a href="#" class="triggerpopup" style="
  margin: 15px;
  padding: 0 15px;
  display: block;
  float: left;
  height: 35px;
  color: #fff;
  font: 13px/35px Arial, Helvetica, Sans-serif;
  text-decoration: none;
  background-color: #b33;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;">Open Popup</a>

CSS

/* Information Popup Backdrop */
div.infopopupbackdrop {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 998;
	display: none;
	width: 100%;
	height: 100%;
	cursor: pointer;
	background-color: #fff;
	background-color: rgba(255, 255, 255, 0.75);
	}



/* Information Popup Content */
div.infopopup {
	position: fixed;
	top: 50%;
	left: 50%;
	z-index: 999;
	display: none;
	width: 100%;
	max-width: 500px;
	
	-webkit-box-shadow: 0 0 30px rgba(0, 0, 0, 0.10);
	-moz-box-shadow: 	0 0 30px rgba(0, 0, 0, 0.10);
	box-shadow: 		0 0 30px rgba(0, 0, 0, 0.10);
	}
	div.infopopup_inner {
		position: relative;
		padding: 25px;
		border: 1px solid #d0d0d0;
		background-color: #fff;

		-webkit-border-radius: 	5px;
		-moz-border-radius: 	5px;
		border-radius: 			5px;
		}
		a.infopopupclose {
			position: absolute;
			top: 10px;
			right: 10px;
			display: block;
			}

JavaScript

jQuery(document).ready(function($){
		
    $('.triggerpopup').on('click', function(e){
			e.preventDefault();

			infoPopupInit('info','Test<br/>Test<br/>Test');
		});
    
});



/**
 * Information Popup Initialize Function
 */
function infoPopupInit(type,message){
	
	// Call Popup Struction
	infoPopup(type,message);

	// Call Popup Controls
	infoPopupControls();

	// Call Popup Load and Resize
	infoPopupLoadResize();

	// Call Popup Open
	infoPopupOpen();
}



/**
 * Information Popup Structure Function
 */
function infoPopup(type,message){
	
	// HTML Structure
	var popupHintMarkup = 
		'<div class="infopopupbackdrop"></div>' +
		'<div class="infopopup ' + type + '">' +
			'<div class="infopopup_inner">' +
				'<a href="#" class="infopopupclose">x</a>' +
				'<div class="">' +

					message + 

					'<div class="clear"></div>' +
				'</div>' +

				'<div class="clear"></div>' +
			'</div>' +

			'<div class="clear"></div>' +
		'</div>';

	// Prepend to Body
	$('body').prepend(popupHintMarkup);
}



/**
 * Information Popup Controls Function
 */
function infoPopupControls(){

	$('.infopopupbackdrop,.infopopupclose').on('click', function(e){
		e.preventDefault();

		infoPopupClose();
	});

}



/**
 * Information Popup Controls Function: Close
 */
function infoPopupClose(){
	$('.infopopupbackdrop').delay(50).fadeOut(150);
	$('.infopopup').fadeOut(150);

	// Remove Popup after 300ms
	var closePopup = setTimeout(function(){
		$('.infopopupbackdrop,.infopopup').remove();
	},300);
}



/**
 * Information Popup Controls Function: Open
 */
function infoPopupOpen(){
	$('.infopopup').delay(50).fadeIn(150);;
	$('.infopopupbackdrop').fadeIn(150);
}



/**
 * Information Popup Load/Resize Function
 */
function infoPopupLoadResize(){
	
	// On Load and Resize
	$(window).on('load resize', function(){
		
		var _Width = $('.infopopup').width();
		var _Height = $('.infopopup').height();

		console.log('Width: ' + _Width + ' Height: ' + _Height);

		$('.infopopup').css({...