Custom confirmation dialog with JavaScript

Question

I would like to create a JavaScript function similar to confirm() , which shows a dialog (div with a question and 2 buttons) and returns true if the user clicks “Ok” or false otherwise.

Is it possible to do this using JavaScript / jQuery, but without plugins (like jQuery UI or Dialog)? Because I'm trying to reduce the size and the round-trip time ...

I tried to write this code, but I do not know how to make the function "wait" for a user click.

I would like to use my function as follows:

 answer=myConfirm("Are you sure?") 

That way, I could use the same function in several contexts, just changing the question passed as a parameter. This is the same behavior confirm ()

Answer 1

Instead of waiting for user input and then returning from a function, JavaScript often uses a callback function that will be called when the action you expect is completed. For example:

 myCustomConfirm("Are you sure?", function (confirmed) { if (confirmed) { // Whatever you need to do if they clicked confirm } else { // Whatever you need to do if they clicked cancel } }); 

This can be done line by line:

 function myCustomConfirm(message, callback) { var confirmButton, cancelButton; // Create user interface, display message, etc. confirmButton.onclick = function() { callback(true); }; cancelButton.onclick = function() { callback(false); }; } 

Answer 2

If you are using jQuery, why not implement jQueryUI ? And use the Dialog function as follows:

as part 2:

HTML

 <div id="dialog-confirm" title="ALERT"> <p><span class="ui-icon ui-icon-alert" style="float:left; margin:0 7px 20px 0;"></span>Are you sure?</p> </div> 

Script

 $( "#dialog-confirm" ).dialog({ resizable: false, modal: true, buttons: { "OK": function() { $( this ).dialog( "close" ); }, Cancel: function() { $( this ).dialog( "close" ); } } }); 

Everything in Script:

 $(function() { $("<div />").attr("id", "dialog-confirm").append( $("<p />").text('Are you sure?').css("text-align", "center").prepend( $("<span />").addClass("ui-icon ui-icon-alert").css({ float: 'left', margin: '0 7px 20px 0' }) ) ).dialog({ resizable: false, modal: true, title: "ALERT", buttons: { "OK": function() { answer=1; $(this).dialog("close"); }, "Cancel": function() { answer=0; $(this).dialog("close"); } } }); }); 

jsFiddle

Answer 3

This really needs to be done with a callback. The closest thing to what you need is to use the publish and subscribe model with some custom events.

For this:

When the user clicks the Yes button, fires a custom event called clickedYes. Do the same for no

 $('#yesbtn').click(function(){ $(document).trigger('clickedYes'); }); $('#nobtn').click(function(){ $(document).trigger('clickedNo'); }); 

Now we need to “listen” or subscribe to these events and take the appropriate action in context.

Allows you to create a hypothetical situation . The user presses the delete button and you want to confirm this selection.

First configure what you want if they click yes:

 $(document).unbind('clickedYes'); //Unbind any old actions $(document).bind('clickedYes',function(){ //Code to delete the item //Hide the popup }); 

what you want if you don't click no:

 $(document).unbind('clickedNo'); //Unbind any old actions $(document).bind('clickedNo',function(){ //Hide the popup and don't delete }); 

So, we set the actions that clickedYes listen to or click No. Now we just need to show the user a pop-up window so that they click yes or no. When they do, they will trigger the events above.

therefore, your myConfirm () function will do the following:

 function myConfirm(msg){ //change the message to 'msg' //Show the popup } 

Thus, the order will be as follows:

• Bind triggers for custom events to buttons yes and no
• Before the challenge - untie all the old actions and attach new ones.
• Provide the user with a pop-up window that forces them to activate your actions.

This will allow you to call a function like this myConfirm ("Are you sure"); This is not exactly what you need ... but I do not think it is possible to do exactly what you want.