Minimal Clean Popup Box Plugin For jQuery - popup.js

Minimal Clean Popup Box Plugin For jQuery - popup.js

Yet another jQuery based JavaScript pop box replacement that helps you create minimal, clean, customizable, cross-browser alert and confirmation dialog boxes on the website.

More features:

  • Allows to close manually or automatically.
  • Confirm & cancel callback functions.
  • Fully customizable popup appearance.

How to use it:

1. Include the jQuery Popup plugin's stylesheet and JavaScript on the page which has jQuery library included.

<link rel="stylesheet" href="./css/popup.css">
<script src="" 
<script src="./js/popup.js"></script>

2. Create a default alert box that always stay on the screen until you click the close button.

  'type': 'info',
  'title': 'Alert',
  'text': 'An alert dialog'

3. Create a temporary alert box that automatically dismisses after a timeout you specify (2 seoncds in this example).

  'type': 'info',
  'title': 'Alert',
  'text': 'An alert dialog',
  'autohide': true,
  'showtime': 2000 // 2 seconcds

4. Create a confirmation dialog box with confirm and cancel callbacks.

  'type': 'submit',
  'title': 'Confirm Dialog',
  'text': 'A confirm dialog',
  'cancelbutton': true,
  'closeCallBack': function(){
  'submitCallBack': function(){

5. Adjust the styles of your dialog popup by overriding the following settings.

  // popup box
  'width': 'auto',
  'height': 'auto',
  'color': '#fff',
  'bgcolor': '#666',
  // confirm button
  'submitvalue': 'Okey',
  'submitcolor': '#fff',
  'submitbgcolor': '#ff3333',
  'submitbordercolor': '#ff0000',
  // cancel button
  'cancelvalue': 'Cancel',
  'cancelcolor': '#333',
  'cancelbgcolor': '#fff',
  'cancelbordercolor': '#ccc'

This awesome jQuery plugin is developed by liaojunhongyue. For more Advanced Usages, please check the demo page or visit the official website.

  • Publication date: 31.05.2018
  • Source