Jquery Confirmation samples

Question

Hello All,

I would like to have more samples regarding the jquery confirmation box.

I have learned how to show the confirmation dialogure box through the below example:

http://www.webstuffshare.com/2010/03/jquery-plugin-jconfirmaction/

But, I need more colorful samples, can you please help?

Answer 1

I'd suggest you take a look at jQuery UI's dialog widget. jQuery UI is jQuery's official user interface library. So you're sure to avoid The Bathroom Wall of Code :)

Also; the documentation and community around this library is huge. So if you we're to get stuck; you are sure to get help.

Answer 2

Try this example...

In your view page where the delete button is present, type this code..

<div id="dialog-confirm" title="Remove this?">
    <p align="justify"> 
         <span class="ui-icon ui-icon-alert" style="float:left; margin:0 7px 20px 0;"></span>
         This will be permanently deleted in our system and cannot be recovered. Do you want to continue?
    </p>
</div> 

Trigger example of delete button (put this in your js file):

$("#deletebutton").click(function() {
    $('#dialog-confirm').dialog('open');
}

// jquery-ui confirm dialog box
$("#dialog-confirm").dialog({
   autoOpen: false,
   resizable: false,
   modal: true,
   buttons: {
        'Remove': function() { // remove what you want to remove
               // do something here
         },
         Cancel: function() {
               $(this).dialog('close');
         }
   }
});

Note: Do not forget to include jquery script and jquery-ui plugin script in your header file. This will not work without this files.

You can download the jquery-ui plugin here.

If you have further questions, just post comments. :D