2012-06-20 12:39:17 - Article

jquery confirmation box thickbox

Content.exe
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.

delete

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 = $('').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;
    });
});
Comments.log - 0 entries

Leave a Response

System Notice: Your email address will not be published. Required fields are marked with *

LOADING...
Initializing CyberDev systems...