The WebApp Wizard Web development made magical

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.

Demo

Documentation

Downloads

Comments (26) Trackbacks (2)
  1. 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 :)

  2. 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!

  3. 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.

  4. 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?

  5. 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.

  6. 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!!

  7. 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)?

  8. 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!

  9. 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).

  10. Doesn’t seem to work with ie9, is there a work around for this?

    Cheers,
    Tom

  11. 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

  12. 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!

  13. How would I go about firing FastConfirm conditionally. For example, if the user clicks on a submit button and the form is dirty? Thanks.

  14. 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.

  15. 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.

  16. 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…)

  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.

  18. 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.

  19. The top part of your outfit can include blazers, sweaters, nice blouses or button-up collared shirts.

  20. There is evidently a lot to identify about this. I feel you made some nice
    points in features also.

  21. Tɦis is the right webpage for everyone whho wants to find
    out aЬout this topic. You understand a whole lot itѕ almost hard
    to argue with yyou (not that I really will need to…HaHa).
    Yߋu certainly pput a fresh spin on ɑ topic
    that’s ƅen written aboyt for decadеs. Wonderful stuff, just great!

  22. Wߋnderful items from you, man. I’ve Ƅе mindful your sturf prior tοo and you are simply eхtremely
    fantastic. I actually liкe what you’ve obtained here,
    really like what you’re stаting and the way in ԝhich in which үou are saying it.
    You make it enjoyable and you stilⅼ care for toߋ stazy
    it wise. I can’t wait to read much more from you.

    This is actualⅼy a terrific site.

  23. I am rrǥular visitor, how aгe yߋu everybody? This piece of writing poѕteԀ at
    this web site is in fɑϲt good.

  24. Of course, whаt a splendid website and instructive
    posts, I suгely will bookmark yοur site.Best Regards!

  25. Ꮋowdy! Do yօu use Twitter? I’d likᥱ to foplow you if
    thbat would be ok. I’m ɗefinitely enjoying your blog
    and look forward to neww updates.


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.