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.
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
April 19th, 2011 - 12:45
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
April 24th, 2011 - 18:53
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.
May 12th, 2011 - 11:26
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
May 12th, 2011 - 14:18
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.
May 20th, 2011 - 14:43
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(“”);
});}
});});
May 20th, 2011 - 14:47
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
May 20th, 2011 - 14:51
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(“”);
});}
});});
May 21st, 2011 - 21:00
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:)
June 2nd, 2011 - 17:45
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?)
June 2nd, 2011 - 21:06
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).
June 6th, 2011 - 16:34
Hi,
Would be cool add “onClose” function, called on any confirm or cancel.
thx
July 6th, 2011 - 11:11
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.