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
Type Name Latest commit message Commit time
Failed to load latest commit information.

Simple Modal/Popup for inline elements

How to use this plugin

1. Create markup (Inline) (Add any custom class for themes e.g. .modal__wrapper--default-theme)

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


3. Place the close button if needed


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


5. Call the plugin when needed


How to customize

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


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

	 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.