Responsive Modal Alert Dialog jQuery - Download Responsive Modal-style Alert Dialog With jQuery - alert.js

Download Responsive Modal-style Alert Dialog With jQuery – alert.js

By Posted on

This time I will share jQuery Plugin and tutorial about Responsive Modal-style Alert Dialog With jQuery – alert.js, hope it will help you in programming stack.

Responsive Modal Alert Dialog jQuery - Download Responsive Modal-style Alert Dialog With jQuery - alert.js
File Size: 10.1 KB
Views Total: 4819
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

Demo Download

alert.js is a minimal (less than 1kb) jQuery plugin which helps create a responsive, cross-browser, modal-style alert dialog with an animated background overlay on the html page.

How to use it:

1. Insert jQuery library, alert.css, and alert.js into the page.

view source
1 <link href="alert.jquery.css" rel="stylesheet">
2 <script src="//code.jquery.com/jquery.min.js"></script>
3 <script src="alert.jquery.js"></script>

2. You might need a trigger element to toggle the alert dialog (OPTIONAL).

view source
1 <button id="trigger">ALERT</button>

3. Initialize the alert dialog and define your own alert message as follows:

view source
1 $.createAlert({
2   attachAfter: '#trigger',
3   title: 'You have reached the limit or your quota!',
4   confirmText: 'Accept',
5   confirmStyle: 'blue',
6   callback: null
7 });

4. Show the alert dialog on the page.

view source
1 $.showAlert();

5. If you want to enable the trigger element to toggle the alert dialog.

view source
01 $('#trigger').click(function(){
02   $.createAlert({
03     attachAfter: '#trigger',
04     title: 'You have reached the limit or your quota!',
05     confirmText: 'Accept',
06     confirmStyle: 'blue',
07     callback: null
08   });
09   $.showAlert();
10 });  

6. Override the default styles of the alert dialog as you seen in the alert.css:

view source
01 #alert_backdrop {
02   width: 100%;
03   height: 100%;
04   position: fixed;
05   top: 0;
06   left: 0;
07   background: #000;
08   -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
09   filter: alpha(opacity=50);
10   -khtml-opacity: 0.5;
11   -moz-opacity: 0.5;
12   opacity: 0.5;
13   filter: alpha(opacity=50);
14   ;
15   display: none;
16 }
17  
18 #alert_dialog {
19   position: fixed;
20   top: 20%;
21   left: 30%;
22   width: 40%;
23   padding: 20px;
24   box-sizing: border-box;
25   background: #FFF;
26   box-shadow: 0px 0px 2px 2px #6B6B6B;
27   display: none;
28 }
29  
30 #alert_title {
31   color: #525252;
32   padding: 0px 0px 5px 5px;
33   font-weight: bold;
34   font-size: 18px;
35 }
36  
37 #alert_actions {
38   margin-top: 20px;
39   text-align: center;
40 }
41  
42 #alert_actions button {
43   padding: 10px 15px;
44   border: 0;
45   color: #FFFFFF;
46   text-transform: uppercase;
47   cursor: pointer;
48   -khtml-border-radius: 3px;
49   -o-border-radius: 3px;
50   border-radius: 3px;
51   -webkit-border-radius: 3px;
52   -moz-border-radius: 3px;
53 }
54  
55 #alert_actions button.blue { background: #007aff; }

7. Customize the template of the alert dialog.

view source
01 $.createAlert({
02   attachAfter: '#trigger',
03   title: 'You have reached the limit or your quota!',
04   template:
05     <p> This a template to provide some info to the customer <p>
06     <p> <strong> Alert: </strong> Read it carefully </p>,
07   confirmText: 'Accept',
08   confirmStyle: 'blue',
09   callback: null
10 });

Changelog:

2018-07-03

  • Fixed ‘mouseup’ event name

2018-06-30

  • Bugfix

2018-05-16

  • Added template option

2018-02-06

  • Made it responsive

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

source : jquery.net

Related posts: