Easy Popup Message Plugin For jQuery - Floatcard

File Size: 12.3 KB
Views Total: 686
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
Easy Popup Message Plugin For jQuery - Floatcard

Floatcard is an easy-to-use jQuery popup message plugin which helps you create floating or static notification messages as an alternative to the native browser popup box.

More features:

  • Toast-like notification: auto dismisses after a timeout.
  • Notification bar: full width notification message.
  • 5 predefined notification types: default, fatal, error, warn, info.
  • Custom position.
  • Can be attached to the whole body or a specified container.

How to use it:

1. To use the plugin and include jQuery library and other required resources on the webpage.

<link rel="stylesheet" href="/path/to/jquery.floatcard.css" />
<script src="/path/to/jquery.min.js"></script>
<script src="/path/to/jquery.floatcard.min.js"></script>

2. Create a default popup message on the screen.

$.floatcard("Notification Message Here");

3. Create a toast-like popup message that automatically dismisses after a timeout you specify (Default: 5000).

$.floatcard("Notification Message Here",{
  autoHide : true,
  autoHideDelay : 3000

4. Customize the position you want to place the popup messages. Possible values: right-top, right-bottom, left-top, left-bottom, center-top, center-bottom, fill-top, fill-bottom.

$.floatcard("Notification Message Here",{
  position : "right-top"

5. Specify the notification type:

$.floatcard("Notification Message Here",{
  state : "default", // fatal, error, warn, info

6. Display the popup message in a specific container.

$.floatcard("Notification Message Here",{
  container : "#yourContainer"

7. Add your own CSS class(es) to the popup message.

$.floatcard("Notification Message Here",{
  styleClass : 'yourClass'

8. Set the z-index property of the popup message. Default: 2000.

$.floatcard("Notification Message Here",{
  zIndex : 2000

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