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.