Fast Confirm
Fast Confirm was born when I felt the need to ask confirmation to users on some actions performed on widgets. The small-sized nature of these widgets, and their ease of use pushed me to design a clean, non intrusive way of asking confirmations. A traditional dialog box, with jQueryUI for example would have disturbed the workflow a bit too much. I also needed something that clearly indicated from where the message came from.
So I decided to do my own plugin for this. It had to be lightweight, easy, clean looking, flexible but not with tons of options. So there is no auto-positioning stuff: if you decide to position it on top of your trigger element, it will be on top, even if it is off-page. It's your business to decide which side of your trigger element is suitable to receive the confirm box.
This plugin doesn't use any image, which makes it extra lightweight. Thanks to Addy Osmani for his excellent video about CSS3, by the way. 
Since version 2.0, you can let Fast Confirm take care of the events management, which permits to use it really simply with form submissions for instance.
No more talking, go look at the demo and documentation pages. That plugin is pretty straightforward.
September 27th, 2010 - 18:54
Very nice plugin ! I already use it
One problem in your Demo is when the user click several times on the “Try it” button… It open several times the dialog box !
I fixed it by letting the user add an “id” parameter in your code so we can append an “id” attribute to the main div and check if the box is already appended to the body.
I’m very happy to find your work so that i finally use an easy and simple code
September 27th, 2010 - 19:14
Hi Mathieu!
That’s a nice report, in fact, I didn’t try to click several times on the button! I will release a new version with this bugfix as soon as possible (along with some CSS3 features, by the way)
.
Thanks for the report!
December 2nd, 2010 - 21:53
I just discovered this plugin today and was able to implement the feature I needed in less that 10 minutes. I wrote about it on my blog: http://www.silverwareconsulting.com/index.cfm/2010/12/2/A-Cool-jQuery-Plugin–FastConfirm
Thanks for the nice plugin.
March 29th, 2011 - 11:02
Hi
I’ve just tried this (latest version) out and it kinda works though the yes/no box doesn’t appear next to the submit button on the form it’s centred on screen. This seems to be happening in FF and chrome. Any ideas?
April 1st, 2011 - 21:06
Hi Chris,
Did you set properly the targetElement option? It is necessary if you use FC directly on your form (which is a really great idea!) rather than on your submit button.
April 3rd, 2011 - 19:17
This is a great plugin! I tried out your examples in IE 9 and it looked great. In Firefox 3.6 it looks really good but there is a dashed box around the entire popup. If I don’t click yes or no and I click outside of the popup the dashed box disappears. If you can’t reproduce it, email me and I’ll reply with a screenshot. Thanks for such a great plugin!!
April 3rd, 2011 - 19:58
Hi Matt,
I am interested in a screenshot, I never saw this dashed box. It must be linked to the focus: FC gains focus at initialization, so when you click outside, the popup loses it, making the dashed box disappear. Maybe it is relative to your Firefox configuration? Did you notice this kind of dashed box in other situations in your browser (not necessarily while using FC)?
April 9th, 2011 - 08:54
Quick question/suggestion. Sometimes, I want a FastConfirm “Yes” to be a good thing (green), but sometimes, I want it to be a negative action (red). Is there a way to specify on-the-fly whether an action is styled red or green? I’m actually custom styling the buttons using CSS3 Buttons by Michael Henriksen (http://css3buttons.michaelhenriksen.dk/), and stumbled across this problem in my web app. Thanks for the awesome plug-in!
April 10th, 2011 - 00:47
That’s a good question.
For the moment, there is no clear way to style buttons differently. You could style the “yes” button with a red background by customizing your CSS, but all “yes” buttons would be red then.
Something you can do, I guess, is using the “fastConfirmClass” parameter. For example, you could leave the default class name for standard confirm boxes, and use “fast_confirm_negative” for the negative ones.
By doing this, you tell Fast Confirm to prefix all class names by “fast_confirm_negative” instead of “fast_confirm”. By specifying a different class name for the negative confirmation boxes, you could then have two different CSS, and be able to style the confirm boxes in two different ways, based on whether the action is positive or negative.
That’s the only way I see today to achieve what you want to do.
(I realize I should update the CSS part of the documentation, which is clearly outdated).
April 14th, 2011 - 13:13
Doesn’t seem to work with ie9, is there a work around for this?
Cheers,
Tom
April 14th, 2011 - 15:46
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
May 22nd, 2011 - 19:05
To remove the border which displays as blue in Chrome and dotted in Firefox. Add this command to the .fast_confirm CSS-class in the file jquery.fastconfirm.css
outline: none;
Otherwise thanks for a good jQuery alert!
June 3rd, 2011 - 21:51
How would I go about firing FastConfirm conditionally. For example, if the user clicks on a submit button and the form is dirty? Thanks.
July 6th, 2011 - 11:16
Hi Mike.
I added a new parameter, called “condition”. It allows you to fire Fast Confirm conditionally, just as you requested.
You can find this new version on GitHub: https://github.com/pjparra/Fast-Confirm
It is not yet available through this site, I’ll have to redesign it a bit, since I pushed all of my plugins on GitHub.
December 15th, 2011 - 22:58
Something changed between versions 2.1.1 (2011-03-23) and 2.2.0 (2011-06-24) which broke the Fast Confirm implementation on my web site WishyBox (http://wishybox.com). I have no idea what change was implemented that caused it to break, but with 2.2.0, the Fast Confirm window comes up at the bottom right of the screen instead of in a proper window. I implemented 2.2.0, but quickly rolled back to 2.1.1 after I discovered that it broke the site’s functionality. You can see the current implementation by going to wishybox.com, logging in with any account (Google, Hotmail, Yahoo, or Facebook), adding an item to your wish list, and then clicking Delete on the item. Sticking with 2.1.1 for now.
December 15th, 2011 - 23:00
Oh, that’s a shame. I’ll take a look as soon as I can.
(And I’ll need to make a major redesign of this whole site too…)
December 15th, 2011 - 23:17
Awesome, thanks PJ!
December 16th, 2011 - 00:17
Actually, it turns out that it’s the fastconfirm.css file in 2.2.0 that seems to have changed things up a bit. When I use the fastconfirm.css from 2.1.1, but the jquery.fastconfirm.js from 2.2.0, it works fine. I wonder what’s going on in my style sheets and in the style sheets in fastconfirm.css in version 2.2.0 that is causing this to happen.
June 12th, 2013 - 23:57
Are you still maintaining this plugin? I believe I have “version: 2.2.0 (2011-06-24)” which I don’t see a link for on the download page (though none of the links seem to work for me). I may have something else going on, though the plugin does not work for me with JQuery 1.9.