Creating Custom Confirm Boxes with jQuery

Creating Custom Confirm Boxes with jQuery

Photo Adrien Gueret
Software Engineer
Marakana, Inc.
Member since Jul 22, 2011
Stream Posts: 6
Posted on May 16, 2012 (3 years ago)
Seen 19251 times.
Tagged As:

Comments

You have to login to post a comment.
Posted on Mar 30, 2015 (1 month ago)
Photo Jeff Schnarel
Owner / Development Engineer
UnderToad Applications
Member since Mar 30, 2015
This is a great tutorial, as well as a good extension/plugin base. Thanks! I modified the plugin to accept 1, 2 or 3 buttons (expample: yes, no, cancel), added parameter buttonCount, and made a couple other mods to genericize the button names to button1, button2, button3. I suppose I could create a dynamic loop and let the user create as many buttons as they like, but that seems like overkill..
Posted on Dec 02, 2014 (5 months ago)
Photo Gary Artmont
Student
Member since Dec 2, 2014
Hello Adrien, i know i could be late to the party here looking at the topic date, but this is what i've been looking for, a straight forward code on customizing a confirm box and i must say this is the best from what i have come across so far but there seems to be a cloud of doom lingering in my code as i cant get the box to pop at all. Please, i need your expert help here on what could be the problem. below is the code. your help on this will be highly appreciated. plus most of your "Try IT" examples also do not work hope you fix it -------------------------------- <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Untitled Document</title> <script type="text/javascript" src="jquery-1.4.4.min.js"></script> <script type="text/javascript" > (function($) { //We'll name our plugin "jConfirm" $fn.jConfirm=function(options) { //Defaults values var defaults= { 'validText': 'OK', 'cancelText': 'Cancel', 'title': 'Are you sure?', 'message': 'Do you really want to do that?' }; var parameters=$.extend(defaults, options); //Plugin code return this.each(function() { var $link=$(this); //If we click on the element $link.click(function(clickEvent) { //clickEvent.preventDefault(); //We create the confirm window var $confirmWindow=$('<div></div>'); $confirmWindow.addClass('jConfirmWindow').css( { 'position': 'fixed', 'left': '50%', 'top': '50%', 'z-index': 1000000 }).hide().appendTo($('body')); var $title=$('<h1>'); $title.addClass('jConfirmTitle').html(parameters.title).appendTo($confirmWindow); var $message=$('<div>'); $message.addClass('jConfirmMessage').html(parameters.message).appendTo($confirmWindow); //Only for checking $confirmWindow.css( { 'width': '300px', 'height': '300px', 'background-color': '#000', 'color': '#fff' }).click(function() { $(this).remove(); }); //End of checking code //Let's center the confirm Window $confirmWindow.css( { 'margin-left': '-'+(confirmWindow.outerWidth())/2+'px', 'margin-top': '-'+(confirmWindow.outerHeight())/2+'px' }); $confirmWindow.fadeIn('slow'); }); }); }; })(jQuery); </script> <script type="text/javascript"> $(document).ready(function() { $('#myID').jConfirm( { 'title': 'A wonderful title', 'message': 'Message confirmation' }); }); </script> </head> <body> <form id="form1" name="form1" method="post" action="confamore.html"> <label>teaser <input type="text" name="textfield" /> </label> <input name="submit" type="button" class="confirm" value="submit" id="myID"/> </form> </body> </html>
Posted on Feb 18, 2013 (2 years ago)
Photo Adrien Gueret
Software Engineer
Marakana, Inc.
Member since Jul 22, 2011
Hm, you didn't provide enough code to permit me to help you. When is this function [i]GetLoginResult[/i] called? You have to call [i]jConfirm[/i] plugin [u]before[/u] clicking on the element, maybe the issue is here.
Posted on Feb 18, 2013 (2 years ago)
Photo Azhar Mansuri
developer
DIGICORP
Member since Feb 18, 2013
Hello, I have implemented this plugin. It works fine if I click 2 times on a button. Here is my code.[function GetLoginResult(data) { if (data != null) { $('#Login1_btnLogin').jConfirm( { 'title': 'My GulfCar', 'message': data }); } $('#spinner').fadeOut(); } ] This code is working fine if I will click 2 times on a button. can you please suggest me how to do it in 1 click?
Posted on Sep 07, 2012 (3 years ago)
Photo Marty W.
Consultant
Member since Sep 7, 2012
Excellent Adrien! Worked like a charm! Thank you very much! Marty
Posted on Sep 07, 2012 (3 years ago)
Photo Adrien Gueret
Software Engineer
Marakana, Inc.
Member since Jul 22, 2011
Hi Marty W.! Do you put $(this).attr("href") inside the callback method? Its context is not the link, but we provide it as parameter inside the plug-in: [code]callbackFunction(link,data);[/code] So, you should try this: [code]$('a').jConfirm({ /* Other options... */ 'onconfirm': function($link, data) { alert($link.attr('href')); } });[/code]
Posted on Sep 07, 2012 (3 years ago)
Photo Marty W.
Consultant
Member since Sep 7, 2012
This plugin is pretty great so far! I've got a dynamic list of items that I'm trying to attach a delete confirm to. Here is what my links look like: <a href="index.cfm?id=#id#&del=y&rank=#rank#" class="delink">X</a> I can get the dialog box, however, I'm having trouble getting the values of my querystring passed through. I've tried $(this).attr("href"), but just keep getting "undefined" for the value. Any ideas? Thanks very much for this! M.
Posted on Sep 07, 2012 (3 years ago)
Photo Adrien Gueret
Software Engineer
Marakana, Inc.
Member since Jul 22, 2011
Hi Ajay Dhama, First, sorry for the late reply! Concerning your issue, it's very strange: do you have any error message in the console log? If so, which one? If not, is it possible to see your code? Furthermore, I think it's not a very good idea to use PHP in order to generate JavaScript code, we should separate client side from server side! Thanks.
Posted on Sep 03, 2012 (3 years ago)
Photo Ajay Dhama
Asst. Programmer
NIC
Member since Sep 3, 2012
Hi Adrien, First of all, Thanks for this wonderful plugin. This plugin works perfectly fine when i write the jConfirm function within html <head> tag but problem occurs when i write the jConfirm function in PHP script in <body> tag, Although it works as expected but only issue is jConfirm window does not closes on clicking any of the given button. I am not able to figure out what's going wrong. Hope, u have any idea.
Posted on Aug 01, 2012 (3 years ago)
Photo Inbal Taizi
Covertix
Member since Jul 31, 2012
Solved :) Thank you very very much for your help!
Posted on Aug 01, 2012 (3 years ago)
Photo Adrien Gueret
Software Engineer
Marakana, Inc.
Member since Jul 22, 2011
I don't have this issue: do you use the source code from this tutorial or did you change it a bit? Or maybe it comes from the browser you use? Anyway, the error you have is thrown when we try to change the "type" attribute of an [b]input[/b] element. We change it at the lines 110 and 118 in [i]jquery-jConfirm.js[/i], but it shouldn't cause this issue... You can try to remove the call of the methods [code]attr('type','button')[/code] and, on the above lines, replace [code]$('<input/>')[/code] with [code]$('<input type="button" />')[/code]. I hope it will solve your problem. :)
Posted on Aug 01, 2012 (3 years ago)
Photo Inbal Taizi
Covertix
Member since Jul 31, 2012
Hi Adrien, Thanks for your quick reply. That's exactly what I wanted to do, just to open a confirm box without any event trigger. I want to change it a bit, and to use this code for my Loading animation (without buttons), and what I need is just to display the box on the screen without any client event. I tried your suggestion: I added an anchor to my page: <a id="testLink" href="#"></a> and in the script I added: $(document).ready( function() { $('#testLink').jConfirm ({ 'title': 'A wonderful title', 'message': 'Message confirmation', 'validText': 'It\'s OK!', 'cancelText': 'Hm... No.', 'oncancel': function() { alert('You cancel the action!'); }, 'onconfirm': function() { alert('You confirm the action!'); } }).trigger('click'); } ); but I get jquery exception: "type property can't be changed". Do you have any idea why? Thanks!
Posted on Jul 31, 2012 (3 years ago)
Photo Adrien Gueret
Software Engineer
Marakana, Inc.
Member since Jul 22, 2011
Hi Inbal, and thanks for your feedbacks! What do you mean by "won't be depend on a click event" ? Do you want to open the confirm box after the page loading? If so, you just have to trigger the "click" event after calling the plugin: [code]$('#myLink').jConfirm(/* Blabla... */).trigger('click');[/code] If you want to do another thing, you can add an option to the plugin which will be a string containing the name of the event you want to listen to.
Posted on Jul 31, 2012 (3 years ago)
Photo Inbal Taizi
Covertix
Member since Jul 31, 2012
Hi Adrien, Thank you very much for your post. Is it possible to change the code such that the call won't be depend on a click event? I tried changing it, but it didn't work. Thanks, Inbal.