Litebox

A lightweight lightbox library

by bowheart

HTML

<a class="modalClick" href="https://dev1.ipartnrdev.com/offer/home/terms.html">Terms</a>
<a class="modalClick" href="https://dev1.ipartnrdev.com/offer/home/terms.html">Terms</a>
<h1>Terms</h1>
	<strong>
	Diet Now<br>
	1405 N State ST STE B<br>Orem, Utah, 84057    855-248-9587</strong>
				<br>
				<br>
				<span>Forskolin Terms and Conditions</span>
				<br>
				<br>
	Your membership starts off with a fee of $79.68 to enroll you in the 10 day trial + 4 day shipping program and receive your first 30 day bottle. After that you will be billed $74.73 plus $4.95 shipping per month until you call customer service at 855-248-9587 to cancel your membership. We ship the product the day after you place your order (orders placed Saturday and Sunday will be shipped the following Monday). Please allow 2-5 business days for the order to arrive. If you wish to cancel your membership you will need to contact a customer service agent. You can reach a customer service agent by calling us at 855-248-9587 or <a href="mailto:[email protected]">email</a> us during normal business hours: Mon - Fri, 8am - 11pm EST / Sat &amp; Sun 11am - 3pm EST. Please read our terms and conditions for complete details and return/refund policies.
		<br>
				<br>
				<strong>Your Forskolin Monthly Program Includes:</strong><p></p>
			<ol>
				<li>A Full 30 Day supply of the Incredible Forskolin Dietary Supplement</li>
				<li>Unlimited Phone Support (call as often as you like, any time you need a helping hand or just have a question!)</li>
				<li>Unlimited Email Support (if you have something extra sensitive that you don’t feel like talking about, we're here for you!)</li>
			</ol>
			<p>
				<strong>Membership Billing Details:</strong></p>
			<ol>
				<li>To take advantage of our membership program, you must pay the $4.95 shipping/membership fee for your initial bottle to start the program.</li>
				<li>Because the success rate increases with the time you dedicate, a 30 day supply of...

JavaScript

(function($) {
	
	var LiteBox = function(triggerEl) {
		if (!triggerEl) {
			console.error('LiteBox Error: DOM element undefined.  Did you use $(document).ready(...) ?');
			return;
		}
		
		this.triggerEl = triggerEl
		this.el = $(this.html); // generate the wrapping HTML
		this.loadContents(triggerEl.href); // load the content HTML
		
		// bind events
		this.bindOpen();
		this.bindClose();
	};
	LiteBox.prototype = {
	
		bindClose: function() {
			var self = this;
			self.el.find('.x').andSelf().click(function(event) {
				event.preventDefault();
				self.hide();
			});
		},
		bindOpen: function() {
			var self = this;
			$(this.triggerEl).click(function(event) {
				event.preventDefault();
				$('body').append(self.el);
				self.show();
			});
			self.el.find('.litebox-front').click(function(event) {
				event.stopPropagation();
			});
		},
		
		get html() {
			return '<div class="litebox"><div class="litebox-front"><span class="x">X</span><div class="litebox-content"><p>Error: The content could not be loaded.</p></div></div></div>';
		},
		
		hide: function() {
			this.el.fadeOut(300, this.el.remove);
		},
		
		loadContents: function(href) {
			this.el.find('.litebox-content').load(href);
		},
		
		show: function() {
			this.el.hide().fadeIn(300);
		}
	};
	
	var css = '.litebox { overflow: hidden; position: fixed; top: 0; left: 0; text-align: center; height: 100%; width: 100%; }'
			+ '.litebox:before { background: rgba(0,0,0,0.4); content: ""; cursor: pointer; position: absolute; top: -100%; left: -100%; height: 300%; width: 300%; }'
			+ '.litebox-front { background: #fff; box-shadow: 2px 2px 10px; box-sizing: border-box; display: inline-block; max-height: 94%; max-width: 94%; overflow: auto; padding: 20px; position: relative; text-align: left; vertical-align: middle; height: 800px; width: 960px; }'
			+ '.litebox-front .x { color: rgba(0,0,0,0.7); cursor: pointer; font-family: arial; font-size: 32px; font-weight: bold; position: absolute; top: 10px; right:...