This time I will share jQuery Plugin and tutorial about Minimalist Flat Confirmation Dialog Plugin With jQuery – confirm.js, hope it will help you in programming stack.
confirm.js is a super tiny jQuery plugin for making a flat style dialog box to confirm some actions with an ‘Accept’ callback and custom text messages.
How to use it:
1. Load the required style sheet in your document’s head
section.
1 |
< link rel = "stylesheet" href = "jquery.confirm.css" > |
2. Load jQuery library and the jQuery confirm.js script style just before the closing body
tag.
1 |
< script src = "//code.jquery.com/jquery.min.js" ></ script > |
2 |
< script src = "jquery.confirm.js" ></ script > |
3. Display a confirmation dialog on the webpage.
2 |
'title' : 'Are you sure?' , |
5 |
'acceptAction' : function () {alert( 'You clicked YES' );} |
4. Override or change the CSS as shown below to create your own styles.
08 |
background-color : #000 ; |
21 |
-webkit-overflow-scrolling: touch; |
24 |
-moz-user-select: none ; |
25 |
-webkit-user-select: none ; |
26 |
-ms-user-select: none ; |
29 |
.confirmBox .confirmDialog { |
30 |
transform: translate( 0 , 0 ); |
36 |
.confirmBox .confirmContent { |
37 |
-webkit-box-shadow: 0 5px 15px rgba( 0 , 0 , 0 , . 5 ); |
38 |
box-shadow: 0 5px 15px rgba( 0 , 0 , 0 , . 5 ); |
40 |
background-color : #fff ; |
41 |
-webkit-background- clip : padding-box; |
42 |
background- clip : padding-box; |
46 |
font-family : sans-serif ; |
49 |
.confirmBox .confirmTitle { |
56 |
box-sizing: border-box; |
58 |
display : inline- block ; |
67 |
background-color : #69FC96 ; |
68 |
border-radius: 0 0 0 . 20em ; |
71 |
.confirmBox .accept:hover { background-color : #87FFAC ; } |
74 |
background-color : #fc7169 ; |
75 |
border-radius: 0 0 . 20em 0 ; |
78 |
.confirmBox .reject:hover { background-color : #fc8982 ; } |
This awesome jQuery plugin is developed by seravifer. For more Advanced Usages, please check the demo page or visit the official website.