jquery confirmation box thickbox

Jquery dialog can be made to work as a confirmation box in a similair way to thickbox.

The link to the action (such as deletion), can be made to display a confirmation box before it completes, by simply adding a class to the href.

For example this link could perform a deletion, just like thickbox used to behave adding the class ‘dialog-confirm’ (the title is used to title the dialog confirm) will request the user to confrim firstly.

<a href="/demos/thickdialog/delete.php" class="dialog-confirm" title="Are you sure about this?">delete</a>

Example: delete(example works fine outside of wordpress)

In order to do this you will need Jquery, and Jquery-UI and the code below.

Alternatively I have written a library called thickdialog which supports the confirmation box, pop ups and forms just by adding a simple class, which is compatible with any framework and can be downloaded from there.

// confirm box, add the class dialog-confirm and a title and it does the rest
$(function (){
    $('a.dialog-confirm').click(function() {
 
        var url = this.href;
        var dialog = $('<div id="dialog" style="display:none" title="Are you sure?">'+this.title+'</div>').appendTo('body');
 
        dialog.dialog({
            resizable: false,
            height:confirmBox_height,
            modal: true,
 
            buttons: {
                    "Yes": function() {
                            $(this).dialog( "close" );
                            window.location.href = url;
 
                    },
                    "No": function() {
                            $(this).dialog( "close" );
                    }
            }
        });
 
        dialog.dialog('option', 'position', 'center');
 
        //prevent the browser to follow the link
        return false;
    });
});
VN:F [1.9.9_1125]
Rating: 8.0/10 (1 vote cast)
VN:F [1.9.9_1125]
Rating: +2 (from 2 votes)
jquery confirmation box thickbox, 8.0 out of 10 based on 1 rating

5,658 views

This entry was posted on Wednesday, June 20th, 2012 at 12:39 pm and is filed under Javascript, Programming, Thickdialog. You can follow any responses to this entry through the RSS 2.0 feed.