WebAppers

/ best free open source web resources /

Shopify

How to Create jQuery Custom Confirm Dialog Replacement

Posted · Category: License Free, Popup

Tutorialzine are teaching us how to build a cross-browser, jQuery Custom Confirm Dialog Replacement. You can choose the text, buttons, and actions that will be executed when they are clicked.

You can customize the appearance of the dialog by modifying jquery.confirm.css. As the message attribute of the dialog takes HTML text, you can further customize it by displaying images and icons in the confirm window. You can even alternatively use this plugin as an alert dialog – you will just need to pass a single button with no action attribute.

confirm-dialog

Requirements: jQuery Framework
Demo: http://demo.tutorialzine.com/2010/12/better-confirm-box…
License: License Free

3 Comments
  • http://www.themodernprogrammer.com The Modern Programmer

    I can’t really see what this offers that the JQuery UI’s built in dialog doesn’t…

  • http://www.vrusso.com.br/ Vicente Russo Neto

    If you are looking for an unobstrusive solution for native confirm function, you may take a look at this solution posted on my blog http://bit.ly/hFvCXt

  • bab

    Hi, it is a nice and neat plug-in but I have some problem.
    Here is how I use it in my page :

    $(document).ready(function () {
    $(‘.ResponseLink’).live(‘click’,function () {
    var idval = this.id;
    $.ajax({
    url: “/Admin/Contact/Edit”,
    data: { id: idval },
    dataType: ‘html’,
    success: function (mydata) {
    $(“#ContactArea”).empty().append(mydata);
    },
    type: “GET”
    });
    return false;
    });

    $(‘.RemoveLink’).live(‘click’, function (e) {
    e.preventDefault();

    //var elem = $(this).closest(‘.item’);

    $.confirm({
    ‘title’: ‘Delete Confirmation’,
    ‘message’: ‘You are about to delete this item. It cannot be restored at a later time! Continue?’,
    ‘buttons’: {
    ‘Yes’: {
    ‘class’: ‘blue’,
    ‘action’: function () {
    //elem.slideUp();
    }
    },
    ‘No’: {
    ‘class’: ‘gray’,
    ‘action’: function () { } // Nothing to do in this case. You can as well omit the action property.
    }
    }
    });
    });
    });

    When page loads and I click on RemoveLink it shows confirmation dialog, but after clicking on ResponseLink, if I click on RemoveLink again, the fire-bug console shows this error : $.confirm is not a function

    Would you help me please ?

Supported By

Deals

Web Browsers Icon Set
Food Icon Set
Flat Icon Set

Flat Icon Set

100 icons