Handy Concise Dialog & Popup Plugin - jQuery Popup.js

File Size: 409 KB
Views Total: 336
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
Handy Concise Dialog & Popup Plugin - jQuery Popup.js

Popup.js is a small and performant jQuery popup box plugin that provides some methods for showing alert popups and dialog boxes with custom actions on the webapp.

The plugin has the ability to automatically resize and relocate the popups & dialogs no matter how you resize the browser window.

How to use it:

1. Insert jQuery library and the Popup.js library's files into the html document.

<link rel="stylesheet" href="css/popup.css">
<script src="https://code.jquery.com/jquery-3.3.1.min.js" 
        integrity="sha384-tsQFqpEReu7ZLhBV2VZlAu7zcOV+rXbYlF2cqB8txI/8aZajjp4Bqd+V6D5IgvKT" 
        crossorigin="anonymous">
</script>
<script src="js/popup.js"></script>

2. Initialize the popup plugin and we're ready to go.

Popup = new PopupClass();

3. The JavaScript to show a standard popup box which can be used as an alert dialog. Available parameters:

  • title: popup title
  • text: popup message
  • scroll: whether to make the popup always be in the center of the screen when scrolling.
  • actionText: text for action button
  • action: custom function which will be fired when you click the action button
Popup.showPopup(title, text, scroll, actionText, action)

4. The JavaScript to show a custom dialog box which can be used as a confirmation dialog. Available parameters:

  • title: popup title
  • text: popup message
  • scroll: whether to make the popup always be in the center of the screen when scrolling.
  • actionType: YES_NO_DIALOG, YES_NO_CANCEL_DIALOG, OK_CANCEL_DIALOG or OK_POPUP.
  • actionListener: custom function which will be fired after you close the dialog.
showDialogPopup(title, text, scroll, actionType, actionListener)

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