Multifunctional jQuery Modal Popup Plugin - cleanPopup

cleanPopup is a minimal, clean jQuery popup plugin which helps you create multifunctional modal windows and dialog boxes on the web app.

More features:

• Loading popup is supported.
• Allows to load external content.
• Permanent or temporary popups.
• Custom actions buttons.
• Callback functions.
• Written in ES5 and ES6

How to use it:

1. Add jQuery library and the cleanPopup plugin's files to the html page.

<link href="styles/cleanPopup.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" 
        integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" 
        crossorigin="anonymous"></script>
<script src="scripts/cleanPopupES5.js"></script>

2. The JavaScript to create a basic alert popup.

var demo1 = new CleanPopup(
    "Modal Title",
    "<p>Modal Content</p>", 
    {
      // custom button
      buttons: [{
        txt: "Accept",
        pressed: function() {
          alert("Button Accept pressed, callback called. After callback, the popup will always close.")
        }
      }]
    }
  );

demo1.show();

3. The JavaScript to create a loading popup that can be used for ajax loading.

var demo2 = new CleanPopup(
    "Modal Title",
    "<p>Modal Content</p>", 
    {
      permanent:true,
      loading:true,
      autofadeTime: 5000,
      callbacks: {
        opened: function(){
          alert("It has been opened, so we call the 'opened' callback!");
        }
      }
    }
  );

demo2.show();

4. All default configuration options to customize the popup.

{

  // true for Permanent popup.
  // false for Temporary popups.
  permanent: false,

  // auto fade after this timeout
  autofadeTime: 0,

  // target container
  target: '',

  // if you want to load external content
  url: false,

  // custom actions buttons
  buttons: false,

  // custom callbacks
  callbacks: false
  
}

---

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