Download
Download the Latest version and use files in the /dist/ folder.

via CDN:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-confirm/3.3.2/jquery-confirm.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-confirm/3.3.2/jquery-confirm.min.js"></script>

via Bower:
Simply copy these links

$ bower install craftpip/jquery-confirm

via Npm:

$ npm install jquery-confirm

Dependencies:

• Bootstrap by Twitter >= v3 (optional, if you want to use responsive layouts)
• jQuery library > v1.8

Buttons can be defined in the following fashion, pretty self explanatory.

1. $.confirm({
2. buttons: {
3. hello: function(helloButton){
4. // shorthand method to define a button
5. // the button key will be used as button name
6. },
7. hey: function(heyButton){
8. // access the button using jquery
9. this.$$hello.trigger('click'); // click the 'hello' button
10. this.$$hey.prop('disabled', true); // disable the current button using jquery method
12. // jconfirm button methods, all methods listed here
13. this.buttons.hello.setText('Helloooo'); // setText for 'hello' button
14. this.buttons.hey.disable(); // disable with button function provided by jconfirm
15. this.buttons.hey.enable(); // enable with button function provided by jconfirm
17. // the button's instance is passed as the first argument, for quick access
18. heyButton === this.buttons.hey
19. },
20. heyThere: {
21. text: 'Hey there!', // text for button
22. btnClass: 'btn-blue', // class for the button
23. keys: ['enter', 'a'], // keyboard event for button
24. isHidden: false, // initially not hidden
25. isDisabled: false, // initially not disabled
26. action: function(heyThereButton){
27. // longhand method to define a button
28. // provides more features
29. }
30. },
31. }
32. });

1. $.confirm({
2. buttons: {
3. hey: function () {
4. // here the button key 'hey' will be used as the text.
5. $.alert('You clicked on "hey".');
6. },
7. heyThere: {
8. text: 'hey there!', // With spaces and symbols
9. action: function () {
10. $.alert('You clicked on "heyThere"');
11. }
12. }
13. }
14. });

Simply apply classes to buttons to style them.

Jconfirm comes bundled with btn-blue btn-green btn-red btn-orange btn-purple btn-default btn-dark
These classes only work inside jquery-confirm's modal

Other bootstrap options are btn-primary btn-inverse btn-warning btn-info btn-danger btn-success.

1. $.confirm({
2. buttons: {
3. info: {
4. btnClass: 'btn-blue',
5. action: function(){}
6. },
7. danger: {
8. btnClass: 'btn-red any-other-class', // multiple classes.
9. ...
10. },
11. warning: {
12. btnClass: 'btn-warning',
13. ...
14. },
15. }
16. });

A 'key' feature of jquery-confirm! (pun intended)
Listen to keyup events for individual buttons. A button can listen for multiple keys at a time.
If multiple modals are stacked together, only the topmost modal will listen for keyboard event.

1. $.confirm({
2. content: 'Time to use your keyboard, press shift, alert, A or B',
3. buttons: {
4. specialKey: {
5. text: 'On behalf of shift',
6. keys: ['shift', 'alt'],
7. action: function(){
8. $.alert('Shift or Alt was pressed');
9. }
10. },
11. alphabet: {
12. text: 'A, B',
13. keys: ['a', 'b'],
14. action: function(){
15. $.alert('A or B was pressed');
16. }
17. }
18. }
19. });

In this example, the YES button is hidden, The user can only use the keyboard to click the button!

1. $.confirm({
2. title: false,
3. content: 'Imagine a very critical action here! <br> ' +
4. 'Please press <strong style="font-size: 20px;">Y</strong> to proceed.',
5. buttons: {
6. yes: {
7. isHidden: true, // hide the button
8. keys: ['y'],
9. action: function () {
10. $.alert('Critical action <strong>was performed</strong>.');
11. }
12. },
13. no: {
14. keys: ['N'],
15. action: function () {
16. $.alert('You clicked No.');
17. }
18. },
19. }
20. });

jquery-confirm provides a set of functions for a nice and clean way to alter your buttons in run-time.
if this is not enough you can use this.$$<buttonName> to get the jquery DOM element

A full list of functions for buttons.

1. $.confirm({
2. closeIcon: true, // explicitly show the close icon
3. buttons: {
4. buttonA: {
5. text: 'button a',
6. action: function (buttonA) {
7. this.buttons.resetButton.setText('reset button!!!');
8. this.buttons.resetButton.disable();
9. this.buttons.resetButton.enable();
10. this.buttons.resetButton.hide();
11. this.buttons.resetButton.show();
12. this.buttons.resetButton.addClass('btn-red');
13. this.buttons.resetButton.removeClass('btn-red');
15. // or
16. this.$$resetButton // button's jquery element reference, go crazy
18. this.buttons.buttonA == buttonA // both are the same.
20. return false; // prevent the modal from closing
21. }
22. },
23. resetButton: function (resetButton) {
25. }
26. }
27. });

Dialog types helps give the user a hint as to what the dialog is about

1. $.confirm({
2. title: 'Encountered an error!',
3. content: 'Something went downhill, this may be serious',
4. type: 'red',
5. typeAnimated: true,
6. buttons: {
7. tryAgain: {
8. text: 'Try again',
9. btnClass: 'btn-red',
10. action: function(){
11. }
12. },
13. close: function () {
14. }
15. }
16. });

Give meaning to your dialog with custom icons.
Read about Font Awesome here .

1. $.confirm({
2. icon: 'glyphicon glyphicon-heart',
3. title: 'glyphicon'
4. });
5. $.confirm({
6. icon: 'fa fa-warning',
7. title: 'font-awesome'
8. });
9. $.confirm({
10. icon: 'fa fa-spinner fa-spin',
11. title: 'Working!',
12. content: 'Sit back, we are processing your request!'
13. });

jQuery confirm uses × html entity for this close symbol, however you can use Any icon of your choice (fa, glyphicon, zmdi)