Simple Modal/Popup for inline elements

How to use this plugin

1. Create markup (Inline)

 div.modal__wrapper.is-hidden (Add any custom class for themes e.g. .modal__wrapper--default-theme)
 	div.modal__double.js-modal__double

2. Inside of the two div you can do your magic.

	div.modal__content

3. Place the close button if needed

a.modal__close.js-modal__close

4. Add custom class for the main wrapper to attach the plugin too

.js-example-modal

5. Call the plugin when needed

$('.js-example-modal').simplePop();

How to customize

In the SCSS file you can find examples for custom show/hide animations

Api

1. Class names

You can customise the following classes when instantiating the plugin

• classHidden: 'is-hidden'
• classVisible: 'is-visible'
• classInvisible: 'is-invisible'
• classTall: 'is-tall'
• classBellow: 'is-bellow'
• classCloseButton: 'js-modal__close'
• classBackground: 'js-modal__double'

2. Callbacks

You have callbacks onClose, onIntentClose, onMistakeClose

• onClose: when the modal is closed
• onIntentClose: when the user clicks on the close button
• onMistakeClose: when the user closes the modal by clicking on the background

3. Example with defaults

 $('.js-example-modal').simplePop({
	 classHidden: 'is-hidden',
	 classVisible: 'is-visible',
	 classInvisible: 'is-invisible',
	 classTall: 'is-tall',
	 classBellow: 'is-bellow',
	 classCloseButton: 'js-modal__close',
	 classBackground: 'js-modal__double',
	 closeOthers: true,
	 closeOthersDelay: 200, //Miliseconds
	 onOpen: function(element){
		console.log('I am open');
		//'element' is the parent of the modal
	 }
	 onClose: function(element){
		console.log('I am closed');
	 },
	 onIntentClose: function(element){
		console.log('I am closed from the X')
	 },
	 onMistakeClose: function(){
		console.log('I am closed from the background')
	 }
 })

##Demo You can run index.html or run a mini-serve with gulp, browsersync and all the goodies

• Run sudo npn install to install dependencies
• Run gulp serve that will open up a server on localhost:3000 with the index file
• Do some stuff and commit