Full featured jQuery Notification Popup Plugin  popmessage

How to use it:

1.Load the Font Awesome 4 if you want to display icons in the notification popups.

<link rel="stylesheet" href="font-awesome.min.css">

2.Load the CSS jquery.popmessage.css and JavaScript jquery.popmessage.js in the html page. Be sure that you first have jQuery library included.

<script src="//code.jquery.com/jquery.min.js"></script>
<link rel="stylesheet" href="jquery.popmessage.css">
<script src="jquery.popmessage.js">

3.Create the notification message as follow:

<div class="pop pop-success pop-top-left">
  <div class="pop-title">
    Success !
  </div>
  <div class="pop-body">
    This is success message !
  </div>
</div>

4. Specify the notification type using the following CSS classes.

  • pop-success:success notification
  • pop-danger:danger notification
  • pop-warning: warning notification
  • pop-info:information notification

5. Position the notifications using the following CSS classes.

  • pop-top-left: top-left
  • pop-top-right: top-right
  • pop-bottom-left:bottom-left
  • pop-bottom-right:bottom-right
  • pop-top-wide:top + full width
  • pop-bottom-wide:bottom + full width

6.Create a button to toggle the notifications

<button data-trigger="pop" data-pop-class="pop-top-left">
  Show Top-Left Corner Pop
</button>

7.Global plugin settings.

// animation speed
fadeIn: 500,
fadeOut: 500,

// auto dismiss after 4 seconds
delay: 4000,

// is closable?
closable: true,

// where to display the notifications
container: undefined

Demo     Download

Full featured jQuery Notification Popup Plugin popmessage

| CSS3, HTML5, Javascript, jQuery Plugins, Slider | 0 Comments
About The Author
- Thank you for visiting my profile page. I have over 8+ years experience in web development. Product quality, Client service, and results are my priority. I offer unparalleled expertise and services in web design and front-end development, including responsive websites (Using Twitter bootstrap framework) and Hybrid Mobile Application (Using IONIC Framework) . I am proficient in a wide spectrum of technologies and learn new ones fast. I am seeking new opportunities to design, build and extend websites and web applications.