This time I will share jQuery Plugin and tutorial about Inline Confirm Popup Plugin With jQuery – j-confirm-action, hope it will help you in programming stack.
| File Size: | 6.86 KB |
|---|---|
| Views Total: | 1515 |
| Last Update: | |
| Publish Date: | |
| Official Website: | Go to website |
| License: | MIT |
j-confirm-action is a lightweight jQuery plugin which displays a popover like inline confirm popup with ‘confirm’ and ‘cancel’ buttons to authenticate user actions like delete confirmation and url direction.
How to use it:
1. Add jQuery library and the jQuery j-confirm-action plugin’s script to your webpages.
1 |
<script src="//code.jquery.com/jquery.min.js"></script> |
2 |
<script src="j-confirm-action.js"></script> |
2. Config the plugin to display a confirmation popup before redirecting the webpage.
1 |
<a href="https://jqueryscript.net" class="demo">Redirect to href </a> |
1 |
$('.demo').jConfirmAction({ |
2 |
question: 'Redirect the page?', |
3 |
noText: 'Cancel' |
4 |
}); |
3. Add the following CSS styles to your webpage. You can modify or override the CSS rules to create your own styles.
01 |
.jc-box { |
02 |
position: fixed; |
03 |
display: inline; |
04 |
text-align: center; |
05 |
width: 174px; |
06 |
height: 68px; |
07 |
color: #000; |
08 |
font-size: 16px; |
09 |
background: #f5f5f5; |
10 |
; |
11 |
padding: 10px; |
12 |
opacity: 0; |
13 |
z-index: 999; |
14 |
border: 1px solid #7F7F7F; |
15 |
border-radius: 4px; |
16 |
box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2); |
17 |
} |
18 |
19 |
.jc-box:before { |
20 |
content: ""; |
21 |
position: absolute; |
22 |
top: -23px; |
23 |
right: 19px; |
24 |
border-width: 11px; |
25 |
border-style: solid; |
26 |
border-color: transparent transparent #7F7F7F transparent; |
27 |
} |
28 |
29 |
.jc-box:after { |
30 |
content: ""; |
31 |
position: absolute; |
32 |
top: -20px; |
33 |
right: 20px; |
34 |
border-width: 10px; |
35 |
border-style: solid; |
36 |
border-color: transparent transparent #ECF0F0 transparent; |
37 |
} |
38 |
39 |
.jc-question { } |
40 |
41 |
.jc-btn-wrap { margin-top: 1.1em; } |
42 |
43 |
.jc-yes, .jc-no { |
44 |
cursor: pointer; |
45 |
display: inline-block; |
46 |
border: medium none; |
47 |
color: #fff; |
48 |
border-radius: 2px; |
49 |
min-width: 55px; |
50 |
padding: 0.2em 0.4em; |
51 |
box-shadow: 0px 2px 4px -3px rgba(0, 0, 0, 0.4), 0px 1.4em 2em -0.7em rgba(255, 255, 255, 0.2) inset; |
52 |
} |
53 |
54 |
.jc-yes { |
55 |
background: #5cb85c; |
56 |
margin-left: -0.5em; |
57 |
} |
58 |
59 |
.jc-no { |
60 |
background: #c9302c; |
61 |
margin: 0 -0.5em 0 1em; |
62 |
} |
63 |
64 |
.jc-yes:hover, .jc-no:hover { box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4) } |
4. All configuration options and callbacks.
01 |
$('.demo').jConfirmAction({ |
02 |
03 |
// confirm message |
04 |
question: 'Are You Sure ?', |
05 |
06 |
// text for confirm |
07 |
yesText: 'Yes', |
08 |
09 |
// text for cancel |
10 |
noText: 'No', |
11 |
12 |
// confirm callback |
13 |
confirm: false, |
14 |
15 |
// cancel callback |
16 |
cancel: false |
17 |
|
18 |
}); |
This awesome jQuery plugin is developed by ank91. For more Advanced Usages, please check the demo page or visit the official website.
source : jqueryscript.net
