My Own Lightbox as a jQuery Plugin

index.html

<a class="lightbox-open lightbox-button" href="javascript:;">Click to open lightbox</a>
<div class="lightbox hidden" data-lb-open>
	<div class="lightbox-viewport-outer">
		<div class="lightbox-viewport">
			<div class="lightbox-viewport-inner">
				<div class="lightbox-title">A Wonderful Title</div>
				<div class="lightbox-content lightbox-content-scroll-small">
					<div class="lightbox-md-6 lightbox-sm-12 lightbox-content-scroll-medium"><code id="demo"></code></div>
					<div class="lightbox-md-6 lightbox-sm-12 lightbox-content-scroll-medium">
						<form name="inquiry" id="inquiry" role="form">
							<div class="row">
								<div class="col-sm-6">
									<label for="firstname">First Name</label>
									<input type="text" placeholder="First Name" name="firstname" id="firstname" required />
								</div>
								<div class="col-sm-6">
									<label for="lastname">Last Name</label>
									<input type="text" name="lastname" id="lastname" placeholder="Last Name" />
								</div>
							</div>
							<div class="row">
								<div class="col-sm-6">
									<label for="email">Email</label>
									<input type="text" name="email" id="email" placeholder="Email" required />
								</div>
								<div class="col-sm-6">
									<label for="phone">Phone Number</label>
									<input type="text" name="phone" id="phone" placeholder="Phone" required />
								</div>
							</div>
							<div class="row">
								<div class="col-sm-12">
									<label for="comments">Comments</label>
									<textarea id="comments" name="comments" rows="5"></textarea>
								</div>
							</div>
							<div class="row">
								<div class="col-sm-12">
									<input type="submit" />
								</div>
							</div>
						</form>
					</div>
				</div>
			</div><a class="lightbox-close" href="javascript:;" data-lightbox-can-close="true"><svg id="svg" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="32" height="32" viewBox="0, 0, 40, 40">
					<circle cx="20" cy="20" r="18" fill="white" stroke="black" stroke-width="4" />
					<rect x="18" y="8" width="4" height="24" transform="rotate(45, 20, 20)" fill="black" />
					<rect x="18" y="8" width="4" height="24" transform="rotate(-45, 20, 20)" fill="black" />
				</svg></a>
		</div>
	</div>
</div>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestias magnam alias pariatur quae ex necessitatibus qui voluptate labore quaerat. Libero corrupti sunt iure odio alias! Suscipit quas distinctio numquam nostrum?
Saepe cum id eum voluptatem officia quisquam atque modi? Eum explicabo commodi voluptates aperiam perferendis tempora corporis voluptatibus, veritatis cupiditate repellat impedit at sed eius natus aliquam et, iste necessitatibus.
Hic magni dicta sapiente at quibusdam veritatis quia corporis. Quas facilis dicta aut nam. Inventore, expedita suscipit corporis quas obcaecati quam distinctio tenetur dignissimos dolor laboriosam, nobis impedit cum quidem.
Quidem ad, quo laboriosam eaque temporibus inventore dicta optio odio quam. Praesentium temporibus quaerat, minus vel et eum totam adipisci natus nisi ab ipsam tempora dolores repellendus, nobis mollitia fugiat!
Expedita, soluta reiciendis dicta, nemo adipisci debitis tempora quam enim repellat placeat at rem eos aspernatur explicabo, voluptas unde vitae sit voluptatum doloremque architecto quis pariatur aut numquam! Animi, doloremque.
Asperiores voluptate recusandae dolorum cupiditate voluptatem ullam alias natus laudantium perferendis, praesentium unde quis incidunt quo, id inventore eius commodi quam nostrum sapiente earum ad dicta! Blanditiis eos reprehenderit fugiat!
Neque tenetur veritatis numquam repellat, sapiente sequi, vitae ex possimus architecto impedit porro ad magnam nulla debitis assumenda ab veniam explicabo, sit molestiae. Quidem hic, unde fugit culpa minima magni?
Eum explicabo minus debitis dolore maiores libero corporis architecto eius perferendis, ratione consequatur assumenda soluta atque amet optio laborum! Consequatur cupiditate suscipit quasi ipsum et ut velit quos doloribus assumenda?
Quis, sequi velit? Sint non in inventore! Impedit harum repellendus, tenetur, distinctio sit provident unde adipisci vitae temporibus mollitia aliquid excepturi vel aut rerum molestiae neque totam autem similique quisquam.
Culpa, officia aspernatur consequatur officiis perferendis ut incidunt ex impedit saepe quasi dolorem fugit optio quam dicta molestias consectetur aliquam enim quod minus aperiam assumenda? Perferendis, molestias laboriosam. Natus, soluta.
Quos est deleniti eligendi expedita culpa itaque tempore optio dolorem omnis excepturi quidem, porro asperiores error ratione consectetur sapiente dolore voluptates! Distinctio eius cum, culpa dolores nulla similique modi omnis.
Incidunt laboriosam, quae nemo nisi aperiam quasi laudantium tempora qui est. Reprehenderit architecto autem asperiores doloribus laudantium itaque consectetur eligendi, suscipit doloremque ipsa unde labore ea. Inventore sunt quasi voluptatum.
Nulla maxime aperiam, numquam porro placeat temporibus eum cum iste maiores? Quis, fuga laborum. A sit voluptas quod reiciendis corporis alias obcaecati repudiandae, maiores dolorem dignissimos similique iste voluptates non!
Fugiat sit id vel nihil nisi pariatur quos deserunt provident commodi cum? Similique deserunt modi rerum dolores? Qui distinctio accusantium illo assumenda voluptatem itaque architecto, et culpa maxime tempore omnis.
Impedit laborum adipisci pariatur facere ducimus illum, repellat distinctio eligendi quaerat eum? Quo, at! Voluptates vel libero, sequi modi asperiores aspernatur quaerat. Est, aut in dolor dolorum voluptatum illo nisi!
Reprehenderit, quo deserunt? Blanditiis saepe doloribus eveniet est, cumque soluta laborum. Saepe adipisci, fugit explicabo enim voluptates dignissimos omnis? Quod saepe recusandae exercitationem delectus et, amet ipsam magnam cum molestias.
Excepturi, doloremque accusamus voluptate nulla incidunt voluptas unde repellat beatae reprehenderit id exercitationem ex blanditiis at ad nostrum minus non iure quas eum rerum libero assumenda atque! Architecto, nulla eligendi.
Iure mollitia modi, autem voluptate alias voluptates quisquam quo recusandae facere blanditiis, similique ad quia consectetur ipsum ab dolores quibusdam expedita. Tempore ullam dolor esse ipsam impedit magni dignissimos ipsum.
Molestias iusto maiores sunt blanditiis impedit magni culpa id eligendi nulla, facilis odio asperiores fuga beatae quidem laboriosam veritatis modi ex neque nisi quasi explicabo error. Ab consectetur veritatis iste.
Ex maiores veritatis odit quas error! Sequi tempore consequuntur, quia perferendis dolores nobis in, similique assumenda magnam voluptatem, impedit nemo excepturi dolore. Saepe animi magnam voluptates officiis consequuntur, pariatur quis.
Velit nostrum quasi nam deleniti dolore tenetur quae amet labore blanditiis aliquam ratione, saepe eveniet veritatis qui laboriosam officiis sunt incidunt! Modi non unde tenetur ratione ipsa beatae voluptas expedita!
Harum, eveniet est maiores, dolorum nobis, sapiente animi molestias veritatis velit necessitatibus earum hic quae? Animi, architecto id error laudantium ad illum sint iure odio, ullam odit ipsam obcaecati voluptas?
Distinctio tempora nostrum voluptas eum ipsa at! Est at in delectus. Dolor asperiores assumenda architecto iure nobis voluptatum. Fuga error, voluptas voluptatem magni fugiat rem ipsam quos obcaecati dicta ullam.
Sed, magnam veniam placeat nam hic animi aut autem, ab eveniet aliquid aspernatur recusandae reiciendis. Odit ab praesentium, a quidem laudantium assumenda corrupti ut blanditiis asperiores delectus labore quas libero.
Aspernatur excepturi quibusdam similique, consequatur eius incidunt ut, debitis illo modi asperiores laudantium nisi odit. Quasi aperiam vero est autem impedit, fuga iste ratione optio eligendi natus doloremque illum at.
Repellat, magnam temporibus facere pariatur doloribus quasi molestiae voluptatum perspiciatis quo minima commodi quidem dicta magni odio aliquid vero sit itaque aliquam, qui eveniet sequi aut. Totam sunt tenetur quia?
Iure dignissimos, blanditiis obcaecati delectus ipsum voluptates laudantium non mollitia soluta in ullam maxime quod saepe ea rem deleniti? Officiis odio doloribus laudantium culpa eveniet voluptate voluptatibus! Nihil, autem cum?
Ab eligendi laboriosam dolorem explicabo corporis nesciunt quis doloribus tempore, laudantium repellendus quaerat, omnis obcaecati aliquam atque magni amet recusandae consequatur ipsa quo. Iusto repellendus minus rerum corrupti officiis beatae.
Sed ut quis deleniti sint cupiditate ipsa error qui eos, ducimus possimus a odio voluptatibus aut reprehenderit iure tempora fuga ullam itaque quaerat. Similique culpa omnis tenetur at quod ea.
Dolores aliquam neque similique tenetur, rerum ut ipsum fugiat, recusandae accusantium explicabo incidunt consequatur corrupti minus impedit, dicta veniam adipisci animi minima sunt saepe perspiciatis provident! Suscipit modi obcaecati laudantium.
Eos explicabo possimus, quia obcaecati ex aliquid quod, fugit libero rerum eius sunt nostrum consequatur impedit a recusandae expedita. Soluta eligendi accusamus accusantium sed nobis aspernatur fugit sint enim reiciendis.
Aliquid quisquam animi incidunt distinctio ratione officiis blanditiis quod. Temporibus, reiciendis fugiat unde aperiam eaque illo minima nobis aliquid in beatae distinctio fugit quos culpa repellat odio laudantium nulla cupiditate!
Iusto reprehenderit voluptas necessitatibus quisquam pariatur cum officia porro quam eaque distinctio nihil ullam amet, architecto sapiente. Nobis repellendus atque possimus optio dolorem tempore? Pariatur iste voluptates inventore dolor error.
Delectus corporis commodi, tempora minus repudiandae ut, ex aliquam voluptates ipsa a, accusamus aliquid? Modi mollitia explicabo fugiat molestias. Ullam suscipit dicta eos omnis ipsa, neque fugiat consequuntur totam veniam.
Inventore nam ipsa impedit, totam harum numquam saepe magnam dicta earum, laudantium in consequuntur, provident quod aperiam sint praesentium distinctio dolorum? Officiis quidem ullam enim aperiam fugiat vero quibusdam eius.
Corporis natus tempora neque eos incidunt cupiditate debitis, dolores velit ipsum earum dolorem pariatur. Quidem necessitatibus ratione quaerat saepe mollitia ut, nulla possimus, quibusdam, modi asperiores ullam illum officia fugiat?
Rem cumque nisi, sit ut, maiores laborum, incidunt quasi cum voluptatibus nihil blanditiis possimus ratione? Praesentium sed voluptas eaque recusandae placeat aliquid voluptates tenetur culpa harum minus? Ex, magni dignissimos!
Illum, repellendus eligendi quia aliquid cupiditate maiores possimus! Maiores tempora itaque, aliquam ad beatae quae consequuntur praesentium inventore velit pariatur rerum odio assumenda dolore vel voluptatem quis soluta atque ex?
Qui nobis beatae, sed ab asperiores possimus, sapiente ipsam ea excepturi quibusdam velit magni nostrum maxime facilis ipsa adipisci et provident tenetur, porro harum assumenda! At doloremque beatae dolorem autem?
Obcaecati laboriosam dolor, animi officia architecto nulla, expedita illo distinctio quas cumque voluptate odio id ad blanditiis quidem, esse sit necessitatibus! Pariatur molestias amet necessitatibus labore laborum obcaecati ex nesciunt.
Expedita aspernatur tempora fuga quisquam velit vel necessitatibus neque! Architecto hic non cum sint error eos inventore atque, consectetur blanditiis. Itaque maxime quia ut maiores quod hic corrupti doloremque vel.
Mollitia porro quod magnam iste eos illo at veniam voluptatum veritatis animi, voluptatem eum dolores vel ratione iure aliquid nesciunt, nisi blanditiis rem placeat velit recusandae odio optio? Perspiciatis, aliquid?
Adipisci officiis, iusto magni quam deserunt eaque nemo ullam alias architecto est natus veritatis totam dolorem molestias dignissimos sunt harum, quidem labore mollitia? Exercitationem sapiente doloribus facilis corporis est voluptatum.
Cumque esse, eum minus nostrum vel omnis magni pariatur quis fugiat quasi provident cupiditate distinctio, at eveniet architecto, in modi consequuntur voluptatibus ducimus vero possimus velit facere sequi. Nobis, nam.
Tenetur vitae corrupti aspernatur ratione consequatur adipisci laudantium placeat reiciendis earum! Ratione quia similique id hic odio adipisci illum sequi. Accusantium harum velit eaque recusandae rem hic cumque non quia!
Eum sed accusamus reiciendis nam velit praesentium corporis ullam quidem minima enim maxime officiis quos ab quod, voluptatum illo alias amet quaerat tempora sequi saepe autem inventore modi recusandae? Odit!
Enim iusto quae nobis. Quasi nihil laudantium vel doloremque explicabo vero rerum corporis. Aspernatur soluta alias suscipit, neque ipsa dolorem! Neque earum non dolores voluptas magni ducimus fugiat id quisquam.
Quasi nulla vitae atque odio modi maxime, numquam consequatur tempora. Explicabo natus earum nulla illo harum, commodi adipisci suscipit, fuga tempore nostrum vel eveniet! Magni ad cumque autem quo. Numquam?
Harum in, voluptas hic distinctio ut sint. A nam repellendus totam deleniti. Doloribus a, laboriosam repudiandae quae, doloremque excepturi numquam inventore est minus consectetur pariatur aspernatur mollitia ratione, optio earum!
Consectetur accusantium dolores veniam blanditiis velit facilis nisi, in quas quaerat! Ab pariatur, ex voluptas reprehenderit placeat nam tempore, ipsum non distinctio, deserunt quos fugiat? Recusandae enim voluptatibus saepe animi?
Eum, molestias! Consequatur pariatur fugiat libero quam ex alias beatae repellendus corporis officia eum facere veniam voluptates asperiores, molestiae nam, delectus illo doloremque. Quia quidem ducimus eligendi maxime. Nostrum, beatae?
Quae modi recusandae ullam? Deleniti, itaque officia suscipit labore ad excepturi doloribus beatae autem perspiciatis illum, voluptatibus corrupti eaque laborum qui sequi voluptas deserunt fugiat sint amet? Sit, fuga sequi!
Unde quisquam ea quia sequi ullam totam. Et consequatur reprehenderit nam commodi eveniet rem, fuga quidem! Laboriosam accusamus dolores iure ratione? Optio perferendis aperiam expedita fuga. Ipsa iusto odio eos?
Quibusdam ipsum architecto ex soluta temporibus, quos perspiciatis, provident est ipsa inventore reprehenderit in voluptatem, iste aut molestiae rerum voluptate! Facere dolore nihil, adipisci sit doloribus omnis minus eligendi tempore.
Assumenda, ut ullam magnam fugiat velit commodi autem distinctio nobis doloribus officiis, at aspernatur quisquam ratione nisi magni hic, quod neque quibusdam voluptatum delectus optio quas quidem. Quis, dignissimos provident.
Ad repudiandae earum repellendus consequuntur esse. Eveniet cupiditate provident delectus quas quaerat, debitis porro. A hic ipsum et suscipit, magnam libero eius est sapiente facere dolorum recusandae sunt itaque blanditiis!
Iusto delectus consequuntur rerum pariatur voluptatum sunt, ipsum quae maiores? Ipsum exercitationem est quo ipsa architecto itaque rem eos minima vero, laborum modi aliquam corporis fuga sed! Enim, officia neque!
Reiciendis rem repellendus molestiae suscipit commodi, eum sapiente voluptate temporibus possimus libero exercitationem laudantium nulla iure dicta ullam, eveniet, vero repudiandae quia numquam recusandae cumque! Quas ea quasi adipisci ad.
Eos, quas necessitatibus reiciendis rerum accusantium id ratione. Doloremque porro voluptas maxime odit fuga sapiente adipisci ab blanditiis doloribus! Fugiat voluptatibus magni possimus placeat autem ipsam temporibus voluptatum cupiditate doloremque!
In architecto aperiam reprehenderit non error exercitationem quia cupiditate labore hic, aspernatur corrupti mollitia natus quisquam odit consectetur, inventore possimus minima ut itaque. Molestiae facilis facere est natus illo rem?
Esse laboriosam quod deserunt, aut quisquam nulla consectetur laborum provident aliquid dicta nobis exercitationem, fugit id ad iusto maxime, totam inventore ipsum minima maiores reiciendis optio incidunt dolores? Accusamus, accusantium!
Officiis ipsum voluptatum nulla magnam atque enim pariatur, voluptatibus, quae quisquam fugit sed mollitia itaque beatae, omnis quia vel quos excepturi! Reprehenderit provident minima dolores labore aperiam aspernatur laudantium officiis.
Sequi nesciunt temporibus rerum repellendus laborum, mollitia praesentium officia sapiente iste tenetur libero facilis id accusantium ab minima explicabo totam nihil porro vel voluptates eaque. Ratione veritatis rem iusto porro?
Autem praesentium nesciunt facere totam veniam aliquid necessitatibus eum quia atque in labore, voluptas minima aperiam laudantium quibusdam inventore magnam corrupti doloribus eligendi dolorem explicabo? Optio laborum quaerat minus mollitia.
Natus aspernatur vitae nisi est, explicabo, saepe fuga culpa dolorem deserunt ipsum nesciunt similique ea eos ipsam labore vel ab consequuntur recusandae debitis qui voluptatem a. Error corrupti eaque dignissimos.
Consectetur magnam illo iste laudantium iusto, aspernatur cupiditate nobis optio quasi, veniam architecto voluptate velit deserunt asperiores quam aliquid ab natus ex dolorem delectus. Blanditiis accusantium ullam sapiente tempora nulla.
Commodi doloremque voluptatum vero et alias? Quidem enim delectus accusantium natus eligendi aliquid fugiat, iusto repudiandae adipisci quam ut recusandae possimus pariatur perferendis at ex tenetur odio culpa eos ad.
Consectetur impedit possimus temporibus, tenetur dignissimos adipisci illo magnam sit? Voluptas natus quisquam, ut harum recusandae optio, rerum repellendus asperiores a hic expedita consequuntur illo rem, incidunt impedit minus maiores?
Praesentium voluptatum error nostrum eligendi non tempore et excepturi atque! In accusantium nemo neque itaque eius soluta enim praesentium odio corrupti perferendis? Cupiditate quos, voluptate harum explicabo rerum dolorum aspernatur.
Quasi mollitia, vel cumque iusto exercitationem sint, aliquam architecto repellat cupiditate ducimus perferendis voluptatum repudiandae debitis obcaecati vero odit aperiam amet assumenda molestias. Reprehenderit ea commodi beatae voluptas doloremque nemo.
Laboriosam placeat saepe voluptatum, culpa harum, vero a, minus ipsam explicabo quod velit quas fugit ducimus debitis? Odio excepturi dicta nemo. Quidem aperiam sed provident nesciunt enim dolor alias sequi.
Iusto, libero perferendis magni, consectetur est sint asperiores nobis quam fugiat placeat nisi nihil, officia magnam illum ex? Ad harum blanditiis nobis ipsam perspiciatis hic minus quos error quidem mollitia.
Eligendi, esse maiores dolorum dicta fugiat maxime corrupti. Hic eos quibusdam harum cupiditate ab velit placeat veniam asperiores pariatur corrupti. Unde facere vero a minima in? Tempora doloremque soluta ab.
Aperiam molestias aliquid minima quidem fugit, cum mollitia minus libero ab corporis tenetur saepe id officiis facere doloremque, pariatur quasi? Reiciendis culpa quo a tenetur cumque veniam aliquam itaque in!
Fugiat nesciunt provident aliquid beatae sequi, quae autem inventore alias illum quos eveniet sed! Suscipit, debitis aperiam a officia ab provident deserunt? Est quo consectetur voluptates adipisci in laborum nihil?
Corrupti ut eveniet officiis dolores atque, ullam minus. In est sint quas! Possimus at itaque incidunt praesentium unde laborum qui facere eligendi doloremque, sequi quibusdam ipsa perspiciatis similique ullam exercitationem.
Asperiores veritatis voluptas eaque molestiae laudantium, tempora sed laborum nam atque temporibus? Praesentium aperiam enim voluptates impedit cum assumenda cupiditate quam nisi, id quos sit similique dolorum maxime possimus laudantium!
Temporibus corrupti inventore, consectetur error voluptatibus quod iure reiciendis debitis incidunt repellendus. Doloremque delectus, impedit neque non, optio deserunt cupiditate reprehenderit blanditiis labore quia aspernatur vel iusto illo vitae tempora.
At temporibus id maxime aspernatur reiciendis vero, distinctio, nulla nemo quisquam, commodi magni itaque. Porro eius obcaecati cumque aperiam quasi ullam, voluptatum quod dolores error accusamus exercitationem. Delectus, eveniet nesciunt?
Animi reprehenderit aut, ratione, beatae molestiae illo cum distinctio ipsa assumenda nam autem provident voluptatibus ut, repudiandae quisquam deserunt modi. Vero aut atque cum voluptates eaque totam dignissimos sequi molestiae.

my-own-lightbox-as-a-jquery-plugin.markdown

My Own Lightbox as a jQuery Plugin

Todo: Allow overriding breakpoint-based max viewport height percentage in inline data attributes?

A Pen by Zach Watkins on CodePen.

License.

script.js

(function ($) {
	// By Zachary Watkins, [email protected]
	// https://github.com/zachwatkins
	// Todo: Allow the number of columns to change between breakpoints for better presentation on mobile.
	$.fn.slightbox = function (options) {
		if (options === undefined) {
			options = {};
		}
		var opts = $.extend({}, $.fn.slightbox.defaults, options);
		// Fill out more info for breakpoints to make them easier to manage performantly.
		for (var i = 0; i < opts.sizes.length; i++) {
			var size = opts.sizes[i];
			var prev_width = i === 0 ? 0 : opts.breakpoints[opts.sizes[i - 1]].width;
			opts.breakpoints[size].minwidth = prev_width;
			opts.breakpoints[size].nomaxwidth =
				i === opts.sizes.length - 1 ? true : false;
		}
		opts.breakpoint = $.fn.slightbox.getBreakpoint(opts);
		return this.each(function () {
			var elem = $(this);
			$.fn.slightbox.init(elem, opts);
		});
	};
	$.fn.slightbox.getBreakpoint = function (options) {
		var sizePassed;
		for (var i = 0; i < options.sizes.length; i++) {
			var size = options.sizes[i];
			var width = options.breakpoints[size].width;
			sizePassed = size;
			if (window.innerWidth < width) {
				break;
			}
		}
		return sizePassed;
	};
	$.fn.slightbox.updateBreakpoint = function ($elem) {
		var options = $elem.data("slightbox");
		$elem.removeClass("lightbox-breakpoint-" + options.breakpoint);
		$elem
			.find(".lightbox-content-scroll-" + options.breakpoint)
			.css("max-height", "");
		options.breakpoint = $.fn.slightbox.getBreakpoint(options);
		$elem.addClass("lightbox-breakpoint-" + options.breakpoint);
		$elem.data("slightbox", options);
	};
	$.fn.slightbox.detectBreakpointChange = function ($elem) {
		var options = $elem.data("slightbox");
		var bp_data = options.breakpoints[options.breakpoint];
		var bp_changed = false;
		if (window.innerWidth > bp_data.minwidth) {
			if (!bp_data.nomaxwidth && window.innerWidth >= bp_data.width) {
				// Breakpoint has stepped up.
				bp_changed = true;
			}
		} else {
			// Breakpoint has stepped down.
			bp_changed = true;
		}
		if (bp_changed) {
			// The breakpoint has changed.
			$elem.trigger("slightbox:breakpointchange");
			return true;
		} else {
			return false;
		}
	};
	$.fn.slightbox.setViewportMaxHeight = function ($elem) {
		var options = $elem.data("slightbox");
		var vh = options.breakpoints[options.breakpoint].lightboxheight;
		$elem.find(".lightbox-viewport").css("max-height", vh + "%");
		options.viewportheight = vh;
		$elem.data("slightbox", options);
	};
	$.fn.slightbox.open = function (e) {
		// Prep the content container height as quickly as possible.
		e.data.elem
			.css({
				opacity: "0",
				visibility: "visible"
			})
			.removeClass("hidden");
		var options = e.data.elem.data("slightbox");
		if (
			options.hasOwnProperty("preopencb") &&
			typeof options.preopencb === "function"
		) {
			options.preopencb(e, options, $.fn.slightbox.finishOpening);
		} else {
			$.fn.slightbox.finishOpening(e);
		}
	};
	$.fn.slightbox.finishOpening = function (e) {
		window.requestAnimationFrame(function () {
			$.fn.slightbox.setViewportMaxHeight(e.data.elem);
			$.fn.slightbox.setContentScrollMaxHeight(e.data.elem);
			e.data.elem.css({
				opacity: "",
				visibility: ""
			});
		});
		// Save the last clicked button for when the keyboard is used to escape back into the page.
		if (e.target !== undefined) {
			// A button was clicked.
			var data = e.data.elem.data("slightbox");
			data.lastclicked = e.target;
			e.data.elem.data("slightbox", data);
		}
	};
	$.fn.slightbox.init = function ($elem, options) {
		// Get the max height of the lightbox viewport setting based on the breakpoint.
		var vh = options.breakpoints[options.breakpoint].lightboxheight;
		options.viewportheight = vh;
		$elem.data("slightbox", options);
		$elem
			.addClass("lightbox-breakpoint-" + options.breakpoint)
			.find(".lightbox-viewport")
			.css("max-height", vh + "%");
		$("body").on("click", options.button, { elem: $elem }, $.fn.slightbox.open);
		var $close_btn = $elem.find(".lightbox-close");
		$elem.add($close_btn).on("click", { elem: $elem }, $.fn.slightbox.close);
		$elem.on("slightbox:breakpointchange", $.fn.slightbox.onBreakpointChange);
		$(window).on("resize", { elem: $elem }, $.fn.slightbox.resize);
		$(document).on("keydown", { elem: $elem }, $.fn.slightbox.keyboardClose);
		if ($elem.attr("data-lb-open") !== undefined) {
			$.fn.slightbox.open({ data: { elem: $elem } });
		}
	};
	$.fn.slightbox.onBreakpointChange = function () {
		var $this = $(this);
		if (!$this.hasClass("hidden")) {
			$this.off("slightbox:breakpointchange", $.fn.slightbox.onBreakpointChange);
			$(window).off("resize", { elem: $this }, $.fn.slightbox.resize);
			$.fn.slightbox.updateBreakpoint($this);
			$.fn.slightbox.setViewportMaxHeight($this);
			$.fn.slightbox.setContentScrollMaxHeight($this);
			$this.on("slightbox:breakpointchange", $.fn.slightbox.onBreakpointChange);
			$(window).on("resize", { elem: $this }, $.fn.slightbox.resize);
		}
	};
	$.fn.slightbox.close = function (e) {
		if (
			e.target.className === "lightbox-close" ||
			e.target.className === "lightbox-viewport-outer"
		) {
			e.data.elem.addClass("hidden");
		}
	};
	$.fn.slightbox.keyboardClose = function (e) {
		// This function is primarily for accessibility sake, but users who like using the keyboard will appreciate it too. This will return focus to the button that opened the lightbox if the user closes the window with the escape key.
		if (27 === e.keyCode && !e.data.elem.hasClass("hidden")) {
			// Escape key, close the window.
			e.data.elem.addClass("hidden");
			var data = e.data.elem.data("slightbox");
			if (data.hasOwnProperty("lastclicked")) {
				data.lastclicked.focus();
			}
		}
	};
	$.fn.slightbox.setContentScrollMaxHeight = function ($elem) {
		var options = $elem.data("slightbox");
		var viewport_percent_height =
			options.breakpoints[options.breakpoint].lightboxheight / 100;
		var content_top_offset = $elem.find(".lightbox-content").position().top;
		var content_bottom_offset = parseInt(
			$elem.find(".lightbox-viewport").css("padding-bottom")
		);
		var maxheight =
			window.innerHeight * viewport_percent_height -
			content_top_offset -
			content_bottom_offset;
		$elem
			.find(".lightbox-content-scroll-" + options.breakpoint)
			.each(function () {
				var detect_largest_height = this.clientHeight;
				if (detect_largest_height < this.scrollHeight) {
					detect_largest_height = this.scrollHeight;
				}
				var newMaxHeight =
					maxheight < detect_largest_height ? maxheight + "px" : "";
				this.style.maxHeight = newMaxHeight;
			});
	};
	$.fn.slightbox.resize = function (e) {
		if (!e.data.elem.hasClass("hidden")) {
			var detected = $.fn.slightbox.detectBreakpointChange(e.data.elem);
			if (false === detected) {
				// The breakpoint didn't change, so let's change it just a little bit.
				$.fn.slightbox.setViewportMaxHeight(e.data.elem);
				$.fn.slightbox.setContentScrollMaxHeight(e.data.elem);
			}
		}
	};
	// The reason we have the maxheight properties set in JS is to help the scroll height calculations.
	$.fn.slightbox.defaults = {
		button: ".lightbox-open",
		sizes: ["small", "medium"],
		breakpoints: {
			small: {
				width: 640,
				lightboxheight: 90
			},
			medium: {
				width: 1024,
				lightboxheight: 60
			}
		}
	};
})(jQuery);

// Demo only, show DOM of lightbox in left column.
var $lb = $(".lightbox").clone();
$("code#demo").append(
	$lb[0].outerHTML
		.replace(/^[^<]+/, "")
		.replace('<code id="demo"></code>', "")
		.replace(/</g, "&lt;")
		.replace(/\t/g, "  ")
		.replace(/\n[\s\t]+\n/g, "")
		.replace(/>\s+</g, "><")
);

var $lightbox = $(".lightbox").slightbox({
	preopencb: function (e, options, finish) {
		console.log("a");
		finish(e);
	}
});
var $container = $("body");
var $form = $(".lightbox form");
var $last_clicked_button = $([]);

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

style.scss

/* If we can say "I am going to lock in the title at x pixels" then we can make this work without JS event triggers and dimension calculation, but that is a limitation which may be impossible to achieve and expect when seeking to create a plugin capable of being used by the general public. */
.lightbox {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	width: 100%;
	height: 100%;
	display: table;
	background: rgba(0, 0, 0, 0.75);
}

.lightbox.hidden {
	display: none;
}

.lightbox-viewport-outer {
	display: table-cell;
	vertical-align: middle;
}

.lightbox-viewport {
	position: relative;
	background: #fff;
	max-width: 700px;
	margin: 0 auto;
	padding: 8px;
	box-shadow: 0 0 32px 16px #000;
}

@media screen and (max-width: 764px) {
	.lightbox-viewport {
		max-width: 100%;
		margin-left: 32px;
		margin-right: 32px;
	}
}

.lightbox-viewport-inner {
	overflow: hidden;
}

.lightbox-close {
	display: block;
	width: 32px;
	height: 32px;
	position: absolute;
	top: -16px;
	right: -16px;
}

.lightbox-close svg {
	pointer-events: none;
}

.lightbox-title {
	padding: 16px;
}

.lightbox-content::before,
.lightbox-content::after {
	content: "";
	display: block;
	clear: both;
}

.lightbox-breakpoint-small .lightbox-content.lightbox-content-scroll-small,
.lightbox-breakpoint-medium .lightbox-content .lightbox-content-scroll-medium {
	padding: 16px;
	box-sizing: border-box;
	margin: 0;
	max-height: 100%;
	overflow: auto;
}

.lightbox-breakpoint-small .lightbox-content > .lightbox-sm-12 {
	width: 100%;
}

.lightbox-breakpoint-small .lightbox-content > .lightbox-sm-6,
.lightbox-breakpoint-medium .lightbox-content > .lightbox-md-6 {
	float: left;
	width: 50%;
}

.lightbox-breakpoint-medium .lightbox-content > .lightbox-md-4 {
	float: left;
	width: 33.3333%;
}

.lightbox-breakpoint-medium .lightbox-content > .lightbox-md-8 {
	float: left;
	width: 66.6666%;
}

.lightbox form input {
	box-sizing: border-box;
	width: 100%;
}

.lightbox form label {
	display: block;
}

.lightbox form textarea {
	box-sizing: border-box;
	width: 100%;
}

.lightbox form .row + .row {
	margin-top: 5px;
}

/* Demo only code */
code {
	white-space: pre-wrap;
	font-size: 0.8em;
}

.lightbox-breakpoint-small code {
	max-height: 68px;
	display: block;
	overflow: auto;
}

styles

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />