Multifunctional jQuery Modal Popup Plugin - cleanPopup
File Size: | 11.8 KB |
---|---|
Views Total: | 1766 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
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.