Author: | lingdublog |
---|---|
Views Total: | 1,767 views |
Official Page: | Go to website |
Last Update: | January 20, 2020 |
License: | MIT |
Preview:

Description:
A native JavaScript popup component that help developer create iOS style loading spinners and alert & confirmation dialog boxes on the web application.
How to use it:
1. Load the Popup.js component in the document and you’re ready to go.
<script src="js/component.js"></script>
2. Create a toast like loading indicator on the screen. Live Demo
let toast = new ToastClass(); toast.onShow = function () { // on show }; toast.onHide = function () { // on hide }; function showToast () { toast.show({ loading: true, onShow: function(){ setTimeout(function(){ toast.show({ text: 'Loading Completely', duration: 2000, onHide: function(){ // do something } }) }, 3000) } }) }
3. Create an alert dialog. Live Demo
let alert = new AlertClass(); alert.onShow = function () { console.log ('Internal onShow'); console.log ('Global onShow') }; alert.onHide = function () { console.log ('Global onHide') }; function showAlert () { alert.show({ title: 'Alert Title', content: 'Alert Message', btnText: 'I Understand', onShow: function(){ console.log('Alert!') }, onHide: function(){ console.log('Hide!') } }) }
4. Create a confirmation dialog.
let confirm = new ConfirmClass(); confirm.onShow = function () { // do something }; confirm.onHide = function () { // do something }; function showConfirm () { confirm.show({ title: 'Confirm Title', content: 'Confirm Message', btns: [{ callback: function(instance){ instance.close = false; console.log('Clicked Close Button'); } }, { text: 'No, Thanks', callback: function(){ console.log('Clicked No Button'); } }], onShow: function(){ console.log('Open!') } }) }