The WebApp Wizard Web development made magical

Documentation

Usage

JS

The jQuery object to which you apply the plugin will be the trigger of the confirmation box. This trigger will be passed along in the parameters for the callback functions.

$('#try').fastConfirm(options);

What else?
You can also call methods, the jQueryUI way:

$('#try').fastConfirm('close');

HTML

Just any valid HTML element:

<button id="try">Try it!</button>

CSS

A CSS file is included in the downloadable package. But you might want to add some custom CSS to make the integration more seamless.

You'll see in the included CSS file that there are two sections, the first one shouldn't be edited, it is a part of the plugin behaviour, and the second part contains what is relative to the look & feel, so you can customize it (if you want a red background for your confirmation box for example).

Options

There are a few options to make Fast Confirm more flexible. Here they are, with their default values:

  • position: ['top', 'right', 'bottom', 'left']
    Defines where to put the confirmation box, realtively to the trigger element.
  • offset: {top: 0, left: 0}
    Allows precise positioning. Top and left offsets will be added to the computed default absolute position of the confirmation box. If you set the top offset to -5 for example, the confirmation box will be 5 pixels above its default position.
  • zIndex: 10000
    Allows you to fine tune the z-index if you're facing z-index issues causing the confirm box not to appear
  • eventToBind: [eventName, false]
    An event name (submit, click...) or false. If an event name is provided, Fast Confirm will take care of event management. This is really useful when you want to deal with form submission.
  • questionText: "Are you sure?"
    The question asked by the confirm box.
  • proceedText: "Yes"
    The text of the button designated to confirm the action
  • cancelText: "No"
    The text of the button designated to cancelthe action
  • targetElement: null
    A selector to specify on which element, inside the binded element, the confirm box should be opened. Mostly useful to open the box on the submit button of a form.
  • unique: [true, false]
    If set to true, only one confirm box can remain opened. Any new confirm box will close opened boxes, triggering the "cancel" action on each one.

  • fastConfirmClass: 'fast_confirm'
    The CSS class prefix used in all Fast Confirm elements. If you want to change classes names for any reason, you have to use this parameter
  • onProceed: function(trigger, clicked) {$.fastConfirm.close(trigger);}
    The function called when the user hits the confirmation button
  • onCancel: function(trigger, clicked) {$.fastConfirm.close(trigger);}
    The function called when the user hits the cancellation button

Methods

  • .fastConfirm('close'): close the confirm box that is binded to the selected element.
Comments (65) Trackbacks (1)
  1. I have now fixed the problem in ie9, it was due to me not putting around my code silly me

    Thank you for this awesome plugin.

    Cheers,
    Tom

  2. Hi, looking at your control, and I am a bit of a novice when it comes to jquery Is it possible to use it on an asp.net buttons OnClientClick event like you could a javascript confirm i.e. “OnClientClick=”return confirm(‘are you sure?’);” so that if the server based click event will only be triggered if a positive response is returned.

    Many thanks

  3. Hi Matthew.

    Unfortunately, I am less than a beginner with ASP.net… All I can say is: have a try! I don’t remember how the server-side/client-side events work in ASP, but I think there must be a way to make this work, as in the end, it’s all about pure HTML and JS, whatever server-side technology is used.

  4. Can this plugin be used on a link ? I have tried to bind it to the click event but it prevents it and I can’t make the navigation to work in case of confirmation.

    TIA

  5. Yes, you can use it on a link. If you use it with the “eventToBind” option, the plugin will take care of the event management, canceling it when the users clicks on “No”, letting it happen when the user clicks on “Yes”.

    If you set “eventToBind” to false (default value), then you have to do it yourself. As onProceed() and onCancel() are called asynchronously, you have to return false at the end of your event handler: when onProceed() or onCancel() will be called, it will be too late, your event handler will already be terminated. So you can’t do anything else but returning false, and do what you have to do in the onProceed() callback, which will probably be, in your case, this:

    documention.location = $trigger.attr('href');

    I hope it helps.

  6. Hi, I dunno why, but it’ not workin’ with me. I am using latest jQuery (1.6.1), and I really don’t know where is the mistake. In advance, my mistake doesn’t stop the whole jScript (the rest of it is workin’), so I think there will be problem somewhere else. It’s linked correctly. Here I post source code of this.

    $(“#imgcl”).click(function(){
    $(“#imgch”).toggle(“2000″);});
    // the first part works correctly even the php condition is succesful

    $(“#imgdel”).click(function(){
    $(this).fastconfirm({
    questionText: “”,
    proceedText: “OK”,
    cancelText: “”,
    onProceed: function(trigger){
    $(trigger).fastconfirm(“close”);
    $.post(“ajax/delimg.php”,{“id” : “”},function(data){
    $(“#data”).html(data);
    $(“#link,#imgcl,#imgdel”).html(“”);
    });}
    });});

  7. Oh crap, the php is not posting. so, I will try it once again.

    $(“#imgcl”).click(function(){
    $(“#imgch”).toggle(“2000″);});
    //here is starting php condition//here it ends same as php code
    $(“#imgdel”).click(function(){
    $(this).fastconfirm({
    questionText: “//filled with php”,
    proceedText: “OK”,
    cancelText: “//filled with php”,
    onProceed: function(trigger){
    $(trigger).fastconfirm(“close”);
    $.post(“ajax/delimg.php”,{“id” : “//filled with php”},function(data){
    $(“#data”).html(data);
    $(“#link,#imgcl,#imgdel”).html(“”);
    });}
    });});
    //the end of php condition

  8. and the last one source, when the condition succeded
    $(“#imgcl”).click(function(){
    $(“#imgch”).toggle(“2000″);});
    $(“#imgdel”).click(function(){
    $(this).fastconfirm({
    questionText: “Do you really want to delete image?”,
    proceedText: “OK”,
    cancelText: “NO!”,
    onProceed: function(trigger){
    $(trigger).fastconfirm(“close”);
    $.post(“ajax/delimg.php”,{“id” : “1″},function(data){
    $(“#data”).html(data);
    $(“#link,#imgcl,#imgdel”).html(“”);
    });}
    });});

  9. I am sorry, for these post, I solved it. I forgot that jQuery is case-sensitive – there is no function called fastconfirm, only fastConfirm:) I am fool.. But this is really great plugin, thanks to you:)

  10. Is it possible to add some code in order to close all boxes when clicking somewhere outside the boxes?
    It is a very common behavior in dynamic websites, and I would be very happy to find it in this fastConfirm as well.

    Thanks and please let me know (will your github repo be active?)

  11. Hi Alex,

    Maybe this is possible, I’ll have to take a look at it. I guess it could work by binding something to the blur event, as, if I remember well, the confirm box gains the focus on init. You can try to edit the code if you want to figure out if this is possible or not.

    And yes, my GitHub repo will be active, I just have to take some time to do it. I’m trying to figure out how to make this work neatly with Cloud9 IDE, which looks really great for Open Source JS projects (and GitHub integration is provided).

  12. Hi,

    Would be cool add “onClose” function, called on any confirm or cancel.

    thx

  13. Hi Rekans.

    I pushed my plugin on GitHub recently, so fell free to fork it and add this function : https://github.com/pjparra/Fast-Confirm

    I’ll have to redesign this site a little bit… I plan to move all the plugins part exclusively on GitHub, with maybe just some kind of home page for each project, showing examples.

  14. wonderful issues altogether, you simply received a new reader.

    What would you recommend about your publish that you made a few days in the past?
    Any sure?


Leave a comment

(required)

You can use basic HTML to enlighten your comments. If you want to post some code, please use the <pre> tag. You can also use syntax coloring by adding class="syntax [language]". <pre class="syntax js"> will color your code as if it was JS code for instance.