iOS Like Toast Notification & Modal Dialog Plugin - jQuery lDialog

iOS Like Toast Notification & Modal Dialog Plugin - jQuery lDialog
File Size: 13.8 KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

lDialog is a lightweight, multi-purpose jQuery popup box plugin that lets you create iOS inspired toast notifications, loading indicators, and alert/confirm modal windows on the web app.

Built-in themes:

  • Default
  • Primary
  • Link
  • Success
  • Info
  • Warning
  • Danger

How to use it:

1. To get started put the following JavaScript and CSS files in your document.

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

2. Create a toast notification which auto dismisses after 2 seconds in this example:

$.lDialog.toast({

  // toast content
  content:'This is a toast',

  // auto dimisses after 2 seconds
  duration: 2000,

  // theme name
  theme:'default'
  
});

3. Create a toast notification with an icon.

$.lDialog.iconToast({

  // toast title
  title: 'This is a toast',

  // or 'error'
  icon: 'success',

  // theme name
  theme:'default',

  // auto dimisses after 2 seconds
  duration: 2000

})

4. Create a loading indicator with custom loading text.

$.lDialog.sLoadingToast({

  // loading text
  title: 'Loading...',

  // theme name
  theme:'default'
})

// close the loading indicator manually
$.lDialog.hLoadingToast()

4. Create a modal-style alert dialog.

$.lDialog.modal({

  // modal title
  title:'Alert',

  // modal content
  content:'Alert Content',

  // button text
  footerText:'Okey'
  
})

6. Create a modal-style confirmation dialog with a calbback function which will be fired when you click the 'confirm' button.

$.lDialog.btnModal({

  // confirm title
  title:'Dialog Title',

  // confirm content
  content:'Dialog Body'
  
},function(){
  console.log("Confirmed");
})

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