🔔 Alert..!! Get 2 Month Free Cloud Hosting With $200 Bonus From Digital Ocean ACTIVATE DEAL

simplePopup is a simple, fast jQuery popup plugin which helps you create modal & popup windows from inline elements within the document.

Modal popup

Documentation

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 May Also Like