minimalModal is a simple lightbox function. Have a only basic properties and after all the operations out of the function as a template to be sent inside. Because I did not want to increase the file size because it is an addition to many unused features.

Properties

Pure javascript
Ecmascript 6
Editable properties

Installation

Download plugin files then include from page. For example:

<link rel="stylesheet" href="/dist/minimalModal.min.css" />
<script type="text/javascript" src="/dist/minimalModal.min.js"></script>

Basic Usage

var  minimalModalSample = new  minimalModal();
minimalModalSample.init();

Using to Parameters

var  minimalModalSample = new  minimalModal({
	startAnimation :  "topToCenter",
	endAnimation :  "centerToTop",
	maxWidth :  600,
	maxHeight :  400,
	xPosition :  "center",
	yPosition :  "center",
	topOuterSpace :  0,
	rightOuterSpace :  0,
	bottomOuterSpace :  0,
	leftOuterSpace :  0,
	hiddenForGradientClick :  true,
	overflowX :  "hidden",
	overflowY :  "auto",
	modalTemplate:  ``
});

Parameters

Name	Default	Description
startAnimation	"topToCenter"	Opening animation. Parameters: topToCenter, bottomToCenter, leftToCenter, rightToCenter
endAnimation	"centerToTop"	Closing animation. Parameters: centerToTop, centerToBottom, centerToLeft, centerToRight
maxWidth	600	Inline max-width styles for modal template.
maxHeight	400	Inline max-height styles for modal template.
xPosition	"center"	Horizontal alignment for modal wrapper.Parameters: "left", "center", "right"
yPosition	"center"	Vertical alignment for modal wrapper.Parameters: "top", "center", "bottom"
topOuterSpace	0	Inline margin styles for top value.
rightOuterSpace	0	Inline margin styles for right value.
bottomOuterSpace	0	Inline margin styles for bottom value.
leftOuterSpace	0	Inline margin styles for left value.
hiddenForGradientClick	true	Selecting True will turn the modal off after turning off the modal container when the gradient is clicked. The False parameter prevents this.
overflowX	"hidden"	Inline overflow-x style for modal template.
overflowY	"auto"	Inline overflow-y style for modal template.
modalTemplate	""	Modal is the area where content is managed. If you don't create an html content, you'll see a blank area according to the width and height values.