jPopup

HTML

<script src="https://rawgit.com/seahorsepip/jPopup/master/js/jquery.jpopup.min.js"></script>

SCSS

$padding: 20px;

.jpopup_overlay {
	background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH4AEOFQs3Rovy/gAAAB1pVFh0Q29tbWVudAAAAAAAQ3JlYXRlZCB3aXRoIEdJTVBkLmUHAAAADUlEQVQI12N48eLFGQAI+QOFL6ImxwAAAABJRU5ErkJggg==");
	background: rgba(232,232,232,.8);
}

.jpopup_wrapper {
	.jpopup {
		border: 0;
		width: 400px;
		background: #fff;
		border-radius: 3px;
		font-family: "Roboto", sans-serif;
		box-shadow: 0 5px 20px rgba(0,0,0, 0.1);

		outline: 1px solid #ddd;
		outline: 1px solid rgba(0,0,0, 0.03);

		.jpopup_title {
			color: #444;
			padding: 0 $padding;
			min-height: $padding;
			line-height: 64px;
			margin-bottom: 10px;

			&:after {
				content: " "; // Add a space because Mozilla fails on this sometimes

				background: -webkit-linear-gradient(rgba(0,0,0,1) 0%, rgba(0,0,0,0) 100%);
				background: -moz-linear-gradient(rgba(0,0,0,1) 0%, rgba(0,0,0,0) 100%);
				background: -o-linear-gradient(rgba(0,0,0,1) 0%, rgba(0,0,0,0) 100%);
				background: linear-gradient(rgba(0,0,0,1) 0%, rgba(0,0,0,0) 100%);

				transition: margin-bottom .3s,
							margin-top .3s,
							height .3s;

				margin-bottom: -$padding;
				pointer-events: none;
				position: absolute;
				height: 10px;
				opacity: .1;
				z-index: 1;
				right: 0;
				left: 0;
				bottom: 0;
			}

			// Remove Margin on all header items
			h1, h2, h3,
			h4, h5, h6 {
				margin: 0;
			}

			// Sized according to 'priority'
			h1 { font-size: 22px; }
			h2 { font-size: 18px; }
			h3 { font-size: 16px; }
			h4 { font-size: 14px; }
			h5 { font-size: 12px; }
			h6 { font-size: 12px; }
		}

		.jpopup_buttons {
			&:before {
				content: " "; // Add a space because Mozilla fails on this sometimes

				background: -webkit-linear-gradient(rgba(0,0,0,0) 0%, rgba(0,0,0,1) 100%);
				background: -moz-linear-gradient(rgba(0,0,0,0) 0%, rgba(0,0,0,1) 100%);
				background: -o-linear-gradient(rgba(0,0,0,0) 0%, rgba(0,0,0,1)...

JavaScript

var example = new jPopup({
	title: "<h2>Hello world!</h2>",
	content: "<p>Sudo make me a sandwich?</p>",
	buttons: [{
		text: "Sure!",
		value: true,
		buttonClass: "ok"
	}, {
		text: "Nope",
		value: false,
		buttonClass: "no"
	}, {
		text: "What?",
		value: "what",
		close: false
	}, {
		text: "Github",
		value: "github",
		close: false
	}],
	draggable: true
});
example.open(function(r) {
	switch(r) {
		case true:
			new jPopup({
				title: "<h2>Yay</h2>",
				content: "<p>Thank you for the sandwich!</p><p>Press ESC to close.</p>",
				keyClose: 27
			}).open();
			break;
		case false:
			var why = new jPopup({
				title: "<h2>Why?!</h2>",
				content: "<textarea placeholder=\"Why do you not want to make a sandwich for me?\" required></textarea>",
				buttons: [{
					text: "Submit",
					checkForm: true
				}],
				position: "stretchBottom"
			});
			why.open(function(r, f) {
				alert("See console for form data");
				var textarea_value = f.find("textarea").val();
				console.log("textarea value: "+textarea_value);
			});
			break;
		case "what":
			var what = new jPopup({
				title: "<h2>What?</h2>",
				content: "<p>A sandwich is a food item consisting of one or more types of food, such as vegetables, sliced cheese or meat, placed on or between slices of bread.</p>",
				buttons: [{
					text: "Toggle draggable",
					value: "draggable",
					close: false
				}, {
					text: "Toggle overlay",
					value: "overlay",
					close: false
				}],
				draggable: true,
				resizeable: true,
				overlay: false,
				closeButton: true
			});
			var draggable = true;
			var overlay = false;
			what.open(function(r) {
				switch(r) {
					case "draggable":
						draggable = draggable ? false:true;
						what.draggable(draggable);
						break;
					case "overlay":
						overlay = overlay ? false:true;
						what.overlay(overlay);
				}
			});
			break;
		case "github":
			var url = "https://github.com/seahorsepip/jPopup";
			var open = window.open(url,...