htmlguyllc / jconfirm

jQuery confirmation plugin

jConfirm

by HTMLGuy, LLC (https://htmlguy.com)

Demos

https://htmlguyllc.github.io/jConfirm/

What is it?

jQuery confirmation tooltip plugin. Easy to use and configure with excellent responsive placement (on the demo page, try resizing your screen!).

Features

• Backdrops (black, white, blurred)
• Themes (black, white, bootstrap 4, bootstrap 4 white)
• Sizes (tiny, small, medium, large)
• Responsive (prefers the supplied position, if it doesn't fit, it attempts to make it smaller by stacking the question and buttons, if it doesn't fit, it tries the "auto" setting, if it still doesn't fit, it shows as a modal in the middle of the screen)
• Customizable buttons and events
• No-conflict CSS
• Additional events like tooltip hide/show for extra control

Getting the files

Clone this repo to your website's public folder

OR

Available on NPM (https://www.npmjs.com/package/jconfirm):

npm install jconfirm

Dependencies

jQuery 3.0+

Setup

Include the plugin in your code:

<link rel="stylesheet" href="jConfirm-master/jConfirm.min.css">
<script src="jConfirm-master/jConfirm.min.js"></script>

jConfirm's defaults make it dead-simple to get started:

<a href='#' 
    data-toggle="confirm"
    data-id="1">Delete it!</a>

$(function(){
  $('[data-toggle="confirm"]').jConfirm().on('confirm', function(e){
     var btn = $(this),
          id = btn.data('id');
     //make your ajax call to delete this record
  });
});

Options and Events

Defaults are shown

$(function(){
  $('[data-toggle="confirm"]').jConfirm({
        //false|array: if provided, this will override the default confirm/deny buttons (see below for an example)
        btns: false,
        //string: question displayed to the user
        question: 'Are you sure?',
        //string: confirm button text
        confirm_text: 'Yes',
        //string: deny button text
        deny_text: 'No',
        //boolean: if true, when the confirm button is clicked the user will be redirected to the button's href location
        follow_href: true,
        //boolean: if true and follow_href is true, the href will be opened in a new window
        open_new_tab: false,
        //boolean : if true, the tooltip will be hidden if you click outside of it
        hide_on_click: true,
        //string ('auto','top','bottom','left','right'): preferred location of the tooltip (defaults to auto if no space)
        position: 'auto',
        //string: class(es) to add to the tooltip
        class: '',
        //boolean: if true, the deny button will be shown
        show_deny_btn: true,
        //string ('black', 'white', 'bootstrap-4', 'bootstrap-4-white')
        theme: 'black',
        //string ('tiny', 'small', 'medium', 'large')
        size: 'small',
        //boolean: show the tooltip immediately on instantiation
        show_now: false,
        //string|false ('black', 'white', 'blurred')
        backdrop: false
  }).on('confirm', function(e){
     var btn = $(this);
     //triggered on confirm
  }).on('deny', function(e){
      var btn = $(this);
      //triggered on deny
  }).on('jc-show', function(e, tooltip){
      //triggered on show of tooltip
      //tooltip dom element is passed as the second parameter
  }).on('jc-hide', function(e){
      //triggered on hide of tooltip
  });
  
  //gets the currently displayed tooltip (if any)
  var current_tooltip = $.jConfirm.current;
  //gets the button that was clicked for the current tooltip
  current_tooltip.dom;
  //hides the current tooltip (remember to make sure there is one first)
  //returns the original dom element
  //you can pass false to disable triggering the hide event
  current_tooltip.hide(false);
});

You can set any of the options you see above globally using this syntax:

$.jConfirm.defaults.question = 'Are you sure?';
$.jConfirm.defaults.confirm_text = 'Yes';
$.jConfirm.defaults.deny_text = 'No';
$.jConfirm.defaults.theme = 'black';

You can override the global and passed options by setting data attributes:

<a href='#' 
    data-toggle="confirm"
    data-question="Are you sure?"
    data-confirm_text="Yes"
    data-deny_text="No"
    data-id="1">Delete it!</a>

$('[data-toggle="confirm"]').jConfirm().on('confirm', function(e){
   var btn = $(this),
        id = btn.data('id');
   //do something
});

Examples

Bootstrap theme:

$(function(){
  $('[data-toggle="confirm"]').jConfirm({
    theme: 'bootstrap-4'
  });
});

or globally:

$.jConfirm.defaults.theme = 'bootstrap-4';

Preferred positioning:

$(function(){
  $('[data-toggle="confirm"]').jConfirm({
    position: 'right'
  });
});

Follow link on confirm:

<a href="https://htmlguy.com" 
    class="btn btn-secondary outside-link">
    HTMLGuy.com
</a>

$('.outside-link').jConfirm({
    question:'You are about to visit an external site, are you sure you want to leave?',
    confirm_text: 'Yes, let\'s go!',
    deny_text:' No way!',
    follow_href: true,
});

Custom question and button text using data attributes:

<a href="#" 
    class="btn btn-secondary send-email" 
    data-question="Are you ready to send your message?" 
    data-confirm_text="Yes, send now" 
    data-deny_text="No, cancel">
    Send
</a>

$('.send-email').jConfirm().on('confirm', function(e){
   //send email
});

Overriding the confirm and deny buttons to create a custom tooltip:

<a href="#" class="btn btn-primary social-share" data-url-to-share="https://htmlguy.com">
Share
</a>

$('.social-share').jConfirm({
    question: 'Share to your favorite social media sites!',
    btns: [
        {
            text:'Facebook',
            event:'facebook-share',
            data: {
                some_data_attr: 1
            },
            class:'facebook-btn jc-button-highlight'
        },
        {
            text:'Twitter',
            event:'twitter-share',
            data: {
                some_data_attr: 2
            },
            class:'twitter-btn jc-button-highlight'
        }
    ]
}).on('facebook-share', function(e, data){
    var btn = $(this);
    var data_attr = data.some_data_attr; //1
    console.log('Sharing to facebook: '+btn.data('url-to-share'));
}).on('twitter-share', function(e, data){
    var btn = $(this);
    var data_attr = data.some_data_attr; //2
    console.log('Sharing to twitter: '+btn.data('url-to-share'));
});

jconfirm's Issues

DOM elements loaded by ajax not clickable

Hi,
If HTML is loaded with .load() by ajax, elements within this "new" loaded HTML will not be seen by the library and hence the confirm popup will not show.

This is most likely due to:
https://stackoverflow.com/questions/1359018/how-do-i-attach-events-to-dynamic-html-elements-with-jquery

Submit Form ( POST ) after confirmation

Hi,

I have a bootstrap form with a submit button as below;

<button type="submit" class="btn btn-primary" name="button_deluser" > Delete Selected User </button>

When the button is clicked - the form is submitted. I would like a confirmation box (Yes - Delete, No ).
I dont understand how to incorporate jConfirm into the button above from the documentation provided.

Any ideas ? Alert - Jquery newbie here.

Webpack minification problem

Hi thanks for your library, but I have a problem with minification using webpack it says:

ERROR in main.2465bbd007eb4bee4c62.js from UglifyJs
Unexpected token: name (helper) [main.2465bbd007eb4bee4c62.js:67980,12]

I tried these imports but it gives error:

require('jconfirm/jConfirm') or
import 'jconfirm/jConfirm'

Do you know how to use it with webpack. Can you help me?

modal is not displayed

try to install jconfirm in my laravel app

script in views

<script type="text/javascript" src="{{asset('/js/jConfirm.js')}}"></script>

<script  type="text/javascript">
    jQuery(document).ready(function() {
        $.jConfirm.defaults.question = '{{ __("¿Estás seguro?") }}';
        $.jConfirm.defaults.confirm_text = '{{ __("Sí") }}';
        $.jConfirm.defaults.deny_text = '{{ __("No") }}';
        $.jConfirm.defaults.position = 'top';
        $.jConfirm.defaults.theme = 'black';
        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            }
        });
    });
</script>
<script  type="text/javascript" src="{{asset('js/functions.js')}}"></script>

my file functions.js
jQuery(document).ready(function () { $('.delete-record').jConfirm().on('confirm', function(e){ const btn = $(this); const route = btn.data("route"); jQuery.ajax({ method: "DELETE", url: route, success: function (data) { window.location.reload(); }, error: function (error) { window.location.reload(); } }) }); });

Error en web console
Uncaught TypeError: Cannot read property 'defaults' of undefined
at HTMLDocument. (units:340)

Uncaught TypeError: $(...).jConfirm is not a function
at HTMLDocument. (functions.js:2)