<a href="#" class="paulund_modal">Click Here</a>
<a href="#" class="paulund_modal_2">Click Here</a>
<a href="#" class="paulund_modal_3">Click Here</a>
*,
*:after,
*:before {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	text-decoration: none;
	font-family: Verdana, sans-serif;
	padding: 0;
	margin: 0;
}
(function($) {

	// Defining our jQuery plugin

	$.fn.paulund_modal_box = function(prop) {

		// Default parameters

		var options = $.extend({
			height: "250",
			width: "500",
			title: "JQuery Modal Box Demo",
			description: "Example of how to create a modal box.",
			top: "20%",
			left: "30%",
		}, prop);

		return this.click(function(e) {
			add_block_page();
			add_popup_box();
			add_styles();

			$('.paulund_modal_box').fadeIn();
		});

		function add_styles() {
			$('header.model-header').css({
				'border-bottom': '1px solid #ccc',
			});
			$('header.model-header .modal-close')
				.mouseleave(function() {
					$(this).css({
						'position': 'relative',
						'float': 'right',
						'display': 'block',
						'font-weight': '900',
						'color': 'rgba(0, 0, 0, 0.8)',
						'font-size': '1.8em',
					});
				})
				.mouseenter(function() {
					$(this).css({
						'color': 'rgba(190, 190, 190, 0.8)',
					})
				})
				.css({
					'position': 'relative',
					'float': 'right',
					'display': 'block',
					'font-weight': '900',
					'color': 'rgba(0, 0, 0, 0.8)',
					'font-size': '1.8em',
				});
			$('header.model-header h2.model-title ').css({
				'color': 'white',
				'font-weight': '900',
				'text-shadow': '0px 0px 0 rgb(233, 233, 233), 1px 1px 0 rgb(210, 210, 210), 0px 0px 0 rgb(188, 188, 188), 0px 0px 0 rgb(165, 165, 165), 0px 0px 0 rgb(143, 143, 143), 5px 5px 0 rgb(120, 120, 120), 0px 0px 0 rgb(98, 98, 98), 0px 0px 6px rgba(0, 0, 0, 0.35), 0px 0px 1px rgba(0, 0, 0, 0.5), 0px 0px 6px rgba(0, 0, 0, .2)',
				'width': '90%',
			});
			$('header.model-header, footer.model-footer').css({
				'-webkit-box-flex': '0',
				'-webkit-flex': 'none',
				'-ms-flex': 'none',
				'flex': 'none',
				'white-space': 'prerap',
				'padding': '1em',
			});
			$('main.model-main').css({
				'overflow-y': 'auto',
				'padding': '1rem',
			});
			$('main.model-main p').css({
				'color': 'grey',
				'font-weight': '500',
			});
			$('footer.model-footer').css({
				'border-top': '1px solid #ccc',
				'text-align': 'right',
			});
			$('footer.model-footer .loader-bar').css({
				'position': 'relative',
				'bottom': '-15px',
				'width': '104.6%',
				'border-radius': '10px',
				'opacity': ' 0.99',
			});
			$('footer.model-footer .loader-bar .bar').css({
				'position': 'relative',
				'bottom': '0px',
				'width': '80px',
				'height': '5px',
				'background': 'white',
				'box-shadow': '0px 0px 0 rgb(233, 233, 233), 1px 1px 0 rgb(210, 210, 210), 0px 0px 0 rgb(188, 188, 188), 0px 0px 0 rgb(165, 165, 165), 0px 0px 0 rgb(143, 143, 143), 0px 0px 0 rgb(120, 120, 120), 0px 0px 0 rgb(98, 98, 98), 0px 0px 6px rgba(0, 0, 0, 0.35), 0px 0px 1px rgba(0, 0, 0, 0.5), 0px 0px 6px rgba(0, 0, 0, .2)',
				'animation': 'loader 7s ease infinite',
				'border-radius': '3px',
			});
			$('.btn').css({
				'display': 'inline-block',
				'padding': '10px',
				'color': '#333',
				'background-color': '#fff',
				'font-size': '14px',
				'font-weight': '400',
				'text-align': 'center',
				'outline': '0',
				'cursor': 'pointer',
				'border': '1px solid rgba(0, 0, 0, .2)',
				'border-radius': '30px',
				'text-transform': 'none',
			});
			$('.success-btn')
				.mouseleave(function() {
					$('.success-btn').css({
						'background-color': '#fff',
						'border': '1px solid rgb(35, 150, 71)',
						'color': 'rgb(35, 150, 71)',
						'border-radius': '30px',
					});
				})
				.mouseenter(function() {
					$('.success-btn').css({
						'background-color': 'rgb(35, 150, 71)',
						'border': '1px solid rgb(35, 150, 71)',
						'color': 'white',
						'border-radius': '30px',
					})
				})
				.css({
					'background-color': '#fff',
					'border': '1px solid rgb(35, 150, 71)',
					'color': 'rgb(35, 150, 71)',
					'border-radius': '30px',
				});
			$('.error-btn')
				.mouseleave(function() {
					$('.error-btn').css({
						'background-color': '#fff',
						'border': '1px solid rgb(150, 35, 35)',
						'color': 'rgb(150, 35, 35)',
						'border-radius': '30px',
					});
				})
				.mouseenter(function() {
					$('.error-btn').css({
						'background-color': 'rgb(150, 35, 35)',
						'border': '1px solid rgb(150, 35, 35)',
						'color': 'white',
						'border-radius': '30px',
					})
				})
				.css({
					'background-color': '#fff',
					'border': '1px solid rgb(150, 35, 35)',
					'color': 'rgb(150, 35, 35)',
					'border-radius': '30px',
				});
			$('header.model-header .model-close').css({
				'border-bottom': '1px solid #ccc',
			});
			/*Block page overlay*/

			$('.model-fade').css({
				'display': '-webkit-box',
				'display': '-webkit-flex',
				'display': '-ms-flexbox',
				'display': 'flex',
				'position': 'fixed',
				'z-index': '1050',
				'transition': 'opacity .15s linear',
				'background-color': 'rgba(0, 0, 0, 0.75)',
				'left': '0',
				'top': '0',
				'height': '100vh',
				'width': '100vw',
			});
			$('.model-dialog').css({
				'display': '-webkit-box',
				'display': '-webkit-flex',
				'display': '-ms-flexbox',
				'display': 'flex',
				'background-color': '#fff',
				'-webkit-box-orient': 'vertical',
				'-webkit-box-direction': 'normal',
				'-webkit-flex-direction': 'column',
				'-ms-flex-direction': 'column',
				'flex-direction': 'column',
				'margin': 'auto',
				'border': '1px solid rgba(0, 0, 0, .2)',
				'border-radius': '5px',
				'box-shadow': '0 3px 9px rgba(0, 0, 0, .5)',
				'max-width': '40em',
				'max-height': '100vh',
			});

		}

		function add_block_page() {
			var block_page = $('<div class="model-fade"></div>');

			$(block_page).appendTo('body');
		}

		function add_popup_box() {
			var pop_up = $('<modal class="model-dialog">\
									<header class="model-header">\
										<a href="#" class="modal-close"> &times; </a>\
										<h2 class="model-title">' + options.title + '</h2>\
									</header>\
									<main class="model-main">\
										<p>' + options.description + '</p>\
									</main>\
									<footer class="model-footer">\
										<a class="btn modal-close error-btn">Cancel</a>\
										<a class="btn modal-close success-btn">OK</a>\
										<div class="loader-bar">\
											<div class="bar"></div>\
										</div>\
									</footer>\
								</modal>');
			$(pop_up).appendTo('.model-fade');

			$('.modal-close').click(function() {
				$(this).parent().fadeOut().remove();
				$('.model-fade').fadeOut().remove();
			});
			$('.model-fade').click(function() {
				//$('.model-fade').fadeOut().remove();
			});
		}

		return this;
	}

})(jQuery);

$(document).ready(function() {
	$('.paulund_modal').paulund_modal_box().draggable();
	$('.paulund_modal_2').paulund_modal_box({
		title: 'Second Title Box',
		description: 'Custom description for box <br/><br/>Quisque sodales odio nec dolor porta sed laoreet mauris pretium. Aenean id mauris ligula, semper pulvinar dolor. Suspendisse rutrum, libero eu condimentum porta, mauris mauris semper augue, ut tempor nunc arcu vel ligula. Quisque orci eros, consequat vel iaculis eget, blandit bibendum est. Morbi ac tellus dui. Nullam eget eros et lectus dignissim placerat. Nulla facilisi. Ut congue posuere vulputate.'
	}).draggable();
	$('.paulund_modal_3').draggable().paulund_modal_box({
		title: 'Change Title with height',
		height: '500'
	});
	$('.paulund_modal_4').paulund_modal_box({
		title: 'Change Title with Width',
		width: '800'
	});
	$('.paulund_modal_5').paulund_modal_box({
		title: 'Second Title Box',
		description: 'Custom description for box <br/><br/>Quisque sodales odio nec dolor porta sed laoreet mauris pretium. Aenean id mauris ligula, semper pulvinar dolor. Suspendisse rutrum, libero eu condimentum porta, mauris mauris semper augue, ut tempor nunc arcu vel ligula. Quisque orci eros, consequat vel iaculis eget, blandit bibendum est. Morbi ac tellus dui. Nullam eget eros et lectus dignissim placerat. Nulla facilisi. Ut congue posuere vulputate.',
		height: '500',
		width: '800'
	});
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. //cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js
  2. //cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js
  3. //maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js