matthewroach / modal

A simple image viewer modal

Modal

A simple modal plugin written in vanilla JavaScript and no external dependencies.

I wrote this little plugin as more of an experiment for myself. I wanted something super simple without the need for jQuery or any other JavaScript framework. It was written to be used on my blog as an image modal viewer for gallery style post outputs.

To use

1. Grab a copy of /src/modal.js and make it available on your page
2. Create an instance of Modal with the required settings, and example below
3. add relevant CSS to your styles, example below

var settings = {
	dialogID: 'gallery-modal',
	dialogClass: "gallery-modal",
	modalItems: '.j-Gallery',
	hideClass: 'hide',
	openBodyClass: 'stopscroll'
};

var demoGallery = new Modal( settings );

.gallery-modal {
	background: rgba(50, 50, 50, 0.5);
	height: 100%;
	left: 0;
	position: fixed;
	text-align: center;
	top: 0;
	width: 100%;
	z-index: 100000;
}

.gallery-modal img {
	height: 85vh;
	position: relative;
	top: 50%;
	transform: translateY(-50%);
	-webkit-transform: translateY(-50%);
}