Minimal Corner Notification Popup Plugin With jQuery jsdvPopup - Download Minimal Corner Notification Popup Plugin With jQuery - jsdvPopup

Download Minimal Corner Notification Popup Plugin With jQuery – jsdvPopup

Posted on

This time I will share jQuery Plugin and tutorial about Minimal Corner Notification Popup Plugin With jQuery – jsdvPopup, hope it will help you in programming stack.

Minimal Corner Notification Popup Plugin With jQuery jsdvPopup - Download Minimal Corner Notification Popup Plugin With jQuery - jsdvPopup
File Size: 30.1 KB
Views Total: 2063
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   



jsdvPopup is a super light jQuery plugin for showing a notification popup at the bottom right of the webpage to broadcast important messages about your website / web application.

Basic usage:

1. Add references to jQuery library and the jQuery jsdvPopup plugin to your html page.

1 <script src="//code.jquery.com/jquery-1.12.0.min.js"></script>
2 <script src="src/jsdvPopup.js"></script>

2. Create custom text for the notification popup.

1 $.jsdvPopup({text:'Text here'});

3. Style the notification popup in the CSS

01 .popup {
02   width: 300px;
03   position: fixed;
04   bottom: 10px;
05   right: 10px;
06   display: none;
07   background: #f3f3f3;
08   border-radius: 7px;
09   box-shadow: 5px 5px 5px rgba(0,0,0,0.5);
10   padding: 10px 35px 10px 10px;
11 }
12  
13 .popup .close {
14   position: absolute;
15   top: 10px;
16   right: 5px;
17   width: 24px;
18   height: 24px;
19   cursor: pointer;
20   background: url("images/icons/delete_24x24.png");
21 }
22  
23 .popup img {
24   float: left;
25   margin-right: 10px;
26 }
27  
28 .popup span {
29   font-weight: bold;
30   color: brown;
31 }

4. Add an image to your notification popup.

1 $.jsdvPopup({
2   text:'Text here',
3   icon: 'icon.png',
4 });

5. Change the amount of time to auto close the notification popup.

1 $.jsdvPopup({
2   text:'Text here',
3   icon: 'icon.png',
4   timeout: 5000 // in ms
5 });

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




source : jqueryscript.net