Jquery Confirmation samples

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

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

http://www.webstuffshare.com开发者_如何学编程/2010/03/jquery-plugin-jconfirmaction/

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

   $(document).ready(function () {

        $("#btnSend").click(function (e) {
            var result = window.confirm('Are you sure?');
            if (result == false) {
                e.preventDefault();
            };
        });
    });

visit the following websites. you will find so many confirmation box developed by jquery plugin library.

http://craftpip.github.io/jquery-confirm/

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.

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

You can check out jAlerts and demo here

I've been using it for quite a long time and happy with it. You can customize the way you want and works cross browser.

Jquery confirmation dialogs must not be that hard to make, i have made a confirmation plugin myself, jquery-confirm that supports modern features.

First of all you must think of how to initialize your confirm.
directly pluginname({title: 'amazing'});
or binding to a element $('.e').pluginname({title:'amazing'})

Then where do u append the plugins HTML content. You can provide the option to the user, and set it to $('body')

Opening and closing your confirm matters too, can be done by
JS or CSS. for example your html markup is
<div class="myplugin-container">The confirmation content goes here</div>
You set a CSS rule

.myplugin-container{
   visibility: hidden;
   transition: all .4s; //transition last for .4s.
   transform: scale(0); //by default the modal is scaled to 0.
}
.myplugin-container.show{
   visibility: visible;
   transform: scale(1);
}

The moment you load your confirmation plugin's html in the DOM it will be hidden because of the above rules. and in you JS code you add a class to your .myplugin-container
$('.myplugin-container').addClass('show')
At this point your confirmation dialog will have a opening animation. that goes from Smaller to normal.