-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathexample.html
135 lines (126 loc) · 4.55 KB
/
example.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery Alertable - Minimal alert, confirm, and prompt replacements.</title>
<style>
body {
font-family: sans-serif;
font-size: 16px;
color: #333;
padding: 20px;
}
h1 {
margin-top: 0;
}
a {
color: #09d;
}
.muted {
color: #999;
}
button {
border: none;
border-radius: 4px;
background: #09d;
box-shadow: none;
color: white;
-webkit-appearance: none;
padding: 10px 20px;
font-family: inherit;
font-size: inherit;
cursor: pointer;
}
button:hover,
button:focus,
button:active {
background-color: #08c;
outline: none;
}
button + button {
margin-left: 10px;
}
</style>
</head>
<body>
<h1>jQuery Alertable</h1>
<p class="muted">
Minimal alert, confirm, and prompt replacements.
</p>
<p>
These alerts are highly customizable. They ship with very basic styles so you can easily
override them or write your own. You can even customize the HTML and the show/hide
animation. Check out the docs to learn more.
</p>
<p>
<a href="https://github.com/claviska/jquery-alertable/">
Docs, download, and bugs
</a>
</p>
<h2>Default Examples</h2>
<p>
<button type="button" class="alert">Alert</button>
<button type="button" class="confirm">Confirm</button>
<button type="button" class="prompt">Prompt</button>
</p>
<h2>Custom Examples</h2>
<p>
<button type="button" class="confirm-html">Confirm (HTML)</button>
<button type="button" class="login">Login</button>
</p>
<p class="muted">
Check your console for response values.
</p>
<link rel="stylesheet" href="jquery.alertable.css">
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="jquery.alertable.min.js"></script>
<script>
$(function() {
// Alert
$('.alert').on('click', function() {
$.alertable.alert('Howdy!').always(function() {
console.log('Alert dismissed');
});
});
// Confirm
$('.confirm').on('click', function() {
$.alertable.confirm('You sure?').then(function() {
console.log('Confirmation submitted');
}, function() {
console.log('Confirmation canceled');
});
});
// Prompt
$('.prompt').on('click', function() {
$.alertable.prompt('How many?').then(function(data) {
console.log('Prompt submitted', data);
}, function() {
console.log('Prompt canceled');
});
});
// Confirm with HTML
$('.confirm-html').on('click', function() {
$.alertable.confirm('Are you <em>really</em> sure?', {
html: true
}).then(function() {
console.log('Confirmation submitted');
}, function() {
console.log('Confirmation canceled');
});
});
// Login
$('.login').on('click', function() {
$.alertable.prompt('Login to continue', {
prompt:
'<input type="text" class="alertable-input" name="username" placeholder="Username">' +
'<input type="password" class="alertable-input" name="password" placeholder="Password">'
}).then(function(data) {
console.log('Login submitted', data);
}, function() {
console.log('Login canceled');
});
});
});
</script>
</body>
</html>