Skip to content
jQuery plugin for Simple Inline Popup
CSS JavaScript HTML
Branch: master
Clone or download
Adrian Florescu Adrian Florescu
Adrian Florescu and Adrian Florescu Updated docs
Latest commit ef76e0d Apr 8, 2016
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.idea
dist
src
.gitignore
LICENSE
gulpfile.js
index.html
package.json
readme.md

readme.md

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
You can’t perform that action at this time.